Skip to content

Instantly share code, notes, and snippets.

@terapyon

terapyon/index.html

Created July 19, 2014 04:50
Show Gist options
  • Save terapyon/352e34adb2841bf4eb9d to your computer and use it in GitHub Desktop.
Save terapyon/352e34adb2841bf4eb9d to your computer and use it in GitHub Desktop.
Download ZIP
iOS向けにAWS S3 + CloudFrontで動画ストリーム ref: http://qiita.com/terapyon/items/e4925c15c7ee58778f92
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>動画ストリーミングのテスト</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.6/video.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a class="glyphicon glyphicon-home" href="http://www.cmscom.jp">CMScom</a></li>
</ul>
</div>
</div>
</nav>
<header><div class="jumbotron"><h1>動画ストリーミングのテスト</h1></div></header>
<article>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">台湾での発表</h3>
</div>
<div class="panel-body">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"example_option":true}'>
<source src="rtmp://s2ev6wge2z2w04.cloudfront.net/cfx/st/&mp4:PyConAPACTW2014terada.mp4"
type='rtmp/mp4' />
<source src="http://dgk03b4kg3q7d.cloudfront.net/ios/hls_400_.m3u8"
type="application/x-mpegURL" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</div>
</div>
</article>
<footer>
<div class="panel panel-default">
<div class="panel-footer">(c)2014 terapyon</div>
</div>
</footer>
</body>
</html>
Raw
index.html(source部分のみ)
<source src="http://dgk03b4kg3q7d.cloudfront.net/ios/hls_400_.m3u8"
type="application/x-mpegURL" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment