ワイズリマインダー

video.jsを使ってHLS動画を配信してみた

DEMO

【再生できたブラウザ】
Windows Chrome 63.0.3239.132
Windows Firefox 59.0.4
Windows Internet Explorer 11.192.16299.0
Windows Edge 41.16299.15.0
Android Chrome 63.0.3239.111
iOS Safari 11.0

【再生できなかったブラウザ】
なし

次のファイルを使用した
video.min.js,video-js.min.css v6.6.2
videojs-contrib-media-sources.min.js v4.6.2
videojs-contrib-hls.min.js v5.12.2

.htaccess

AddType application/x-mpegURL .m3u8
AddType video/MP2T .ts

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>
<script src="videojs-contrib-media-sources.min.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
</head>
<body>
<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="320" height="240" data-setup="{}">
 <source src="output.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください