web-dev-qa-db-ja.com

video.js ustream m3u8ファイルストリーミングで遊ぶ

Webページでvideo.jsを使用してストリーミングするm3u8ファイルを再生しようとしましたが、実行できませんでした。どこに間違いがあるのか​​わかりません。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
  </video>

  <script>
  </script>

</body>
</html>
javascripthtmlstreamingvideo.jsm3u8
7
grigione

の代わりに type='video/mp4'必要ですtype='application/x-mpegURL'。

クロスドメインリクエストが許可されているかどうかも確認してください（CORS）。

ホスティングに関する考慮事項

ネイティブのHLS実装とは異なり、HLS技術はブラウザのセキュリティポリシーに準拠する必要があります。つまり、ストリームを構成するすべてのファイルは、ビデオプレーヤーをホストしているページと同じドメインから、または適切なCORSヘッダーが構成されているサーバーから提供する必要があります。簡単な手順は人気のあるWebサーバーで利用でき、ほとんどのCDNで問題なくCORSをアカウントで有効にすることができます。

ソース： https://github.com/videojs/videojs-contrib-hls

CORSハウツー： http://enable-cors.org/server.html

9
aergistal
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>

  <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.12/video.js"></script>
 <script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
  <script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>Video</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='application/x-mpegURL'>
  </video>

  <script>
  var player = videojs('my_video_1');
  </script>

</body>
</html>

<!-- Replace current .m3u8 and check..current file has access issue-->
3
Ajay nandoriya

私はビデオjsのための最も強力なhlsライブラリの2つを見つけました

1.videojs-http-streaming

このライブラリはvideojs-contrib-hlsから生成されました次の説明に基づいています

注意：このプロジェクトは非推奨となり、videojs-http-streamingが成功します。 VHSはHLSおよびDASHをサポートし、video.js 7に組み込まれています。video.js7ブログ投稿を参照してください

videojs-http-streamingライブラリの簡単な説明は次のとおりです

HLS、DASH、および将来のHTTPストリーミングプロトコルを、ネイティブでサポートされていない場合でも、video.jsで再生します。デフォルトでvideo.js 7に含まれています！。

Githubリンク： https://github.com/yanwsh/videojs-panorama

2.videojs-hlsjs-plugin

このライブラリの簡単な説明は次のとおりです

Hls.jsライブラリを使用して、video.js 5.0以降にHLS再生サポートを追加します。

hls.jsライブラリから使用するライブラリの強み

videojs-hlsjs-plugin githubリンク： https://github.com/streamroot/videojs-hlsjs-plugin

hls.js githubリンク： https://github.com/video-dev/hls.js/

結論

私はこれらの両方のライブラリのプロジェクトを使用しましたが、それらを使用した経験から、videojs-hlsjs-pluginライブラリは強力なhls.jsライブラリを使用するため、大規模なプロジェクトに最適なオプションになる可能性があります。

1
MostafaMashayekhi