HTMLビデオタグを使用してm3u8ファイルを再生する

HTTPライブストリーミング（HLS）を使用して、コンピュータとiPhoneにビデオをストリーミングしようとしています。アップルの「HTTP Live Streaming Overview」や「iPhoneとiPad向けのHTTPライブストリーミングメディアの作成と展開のベストプラクティス」を読んだ後、私はちょっと立ち往生しています。そこHTMLビデオタグを使用してm3u8ファイルを再生する

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2 -y "output.ts"

心配はありません：

は、私は、ファイルMPEG-TS形式とAppleが推奨する設定とベースラインプロファイル3.0をエンコードするために私のソースファイル（MKV）及び使用のffmpegを取りました。 pre-compiled segmenting toolを使って動画を分割し、.m3u8の再生リストを作成しました。結果ファイルには、このように見えた：

#EXTM3U 
#EXT-X-TARGETDURATION:10 
#EXTINF:10, 
http://localhost/media/stream/stream-1.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-2.ts 
#EXTINF:10, 
http://localhost/media/stream/stream-3.ts 
#EXT-X-ENDLIST

は、私はいくつかのExample Playlist Files for use with HTTP Live Streamingに対して、私はすべての問題を見ていないことを確認しました。私もVLCで.m3u8ファイルを再生しようとしましたが、それは魅力的です。

私は、ファイル再生するにはHTMLページを作成：

<html lang="en"> 
    <head> 
     <meta charset=utf-8/> 
    </head> 
    <body> 
     <div id='player'> 
      <video width="352" height="288" src="stream.m3u8" controls autoplay> 
      </video> 
     </div> 
    </body> 
</html>

を、このページでは私のiPhone上で、クロム、Safariで動作しません。 w3schools上のhtml5ビデオタグの例は、自分のコンピュータでうまく動作し、上記の正式なAppleの概要は、私のページと非常によく似たHTMLの例です。それにもかかわらず、自分の.m3u8ページにアクセスすると、私のビデオプレーヤーは完全に反応しません。

出典

2013-11-05 drucifer

mediastreamvalidatorツールの出力を表示できますか？ – vipw

返信いただきありがとうございます！残念なことに、私は「現実の」アップルの開発者になるために現金を払ったわけではないので、私はその特定のツールを持っていません。私は少しの成功で代替の可能性を探してきました。あなたがその前で与えることができるアドバイスは大歓迎です！ – drucifer

おそらくあなたは公開Webサーバーにファイルを置くことができます。無料のWebサーバーが必要な場合は、マイクロAmazon EC2インスタンスを使用できます。その後、より多くのツールにアクセスできる人が一見することができます。実際には、あなたのウェブサーバーによって返されるMIMEタイプが不思議です...これが役立つかどうかを確認してください：http://stackoverflow.com/questions/6438680/http-live-streaming-not-working-on- apache/15696465 – vipw

答えが少し遅くなるかもしれませんが、videoタグにMIMEタイプ属性を入力する必要があります：type = "application/x-mpegURL"私が16：9ストリームに使用するビデオタグは、このように見えます。答えをben.bourdinに追加

<video width="352" height="198" controls> 
    <source src="playlist.m3u8" type="application/x-mpegURL"> 
</video>

出典

2014-04-22 16:50:58

+12

誰かがこの回答をテストしている場合は、Chromeで動作しないことに注意してください。エッジで正常に動作します。ブラウザの互換性のためのソリューションの詳細については、この[回答]（http://stackoverflow.com/a/23388308/4092887）を参照してください。 –

HLSのネイティブブラウザではないため、HLSはChrome上のページにストリームタグでストリームされません。 – HeidiWF

ブラウザはそのvideo要素にHLSをサポートしている場合、あなたは少なくとも、任意のHTMLベースのアプリケーションで確認できます。

Let'sを「あなたのvideo要素のIDがあることを前提としていmyVideoはcanPlayType」、そしてジャバスクリプトを通じて、あなたは使用することができます "" を返し、機能（http://www.w3schools.com/tags/av_met_canplaytype.asp）

var videoElement = document.getElementById("myVideo"); 
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){ 
    //Actions like playing the .m3u8 content 
} 
else{ 
    //Actions like playing another video type 
}

canPlayType機能を：

"" 何のスッポがない場合指定されたオーディオ/ビデオの種類を室温

「多分」ブラウザが指定されたオーディオ/ビデオ・タイプをサポートする場合があり

「おそらく」それが最も可能性の高い指定されたオーディオ/ビデオ・タイプをサポートしている場合（あなただけこれを使用することができます）このヘルプ

希望ブラウザが指定された型をサポートしていることをより確実にするために、検証の値:)

よろしく！

出典

2016-08-11 14:19:25 MaxTomasello

<html> 
<body> 
    <video width="600" height="400" controls> 
     <source src="index.m3u8" type="application/x-mpegURL"> 
    </video> 
</body>

ストリームHLSやコードの上に使用してM3U8ファイル。これは、ブラウザ、クロム、オペラミニ（モバイルブラウザ）に作用します（pcクロムでは動作しません）

すべてのブラウザで再生するには、フラッシュベースのメディアプレーヤーを使用してください。 media player to support all browser

出典

2017-01-03 09:53:35

使用Flowplayer：

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css"> 
    <style> 

    </style> 
    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script> 
    <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
    <script> 
    flowplayer(function (api) { 
    api.on("load", function (e, api, video) { 
     $("#vinfo").text(api.engine.engineName + " engine playing " + video.type); 
    }); }); 
    </script> 

<div class="flowplayer fixed-controls no-toggle no-time play-button obj" 
     style=" width: 85.5%; 
    height: 80%; 
    margin-left: 7.2%; 
    margin-top: 6%; 
    z-index: 1000;" data-key="$812975748999788" data-live="true" data-share="false" data-ratio="0.5625" data-logo=""> 
     <video autoplay="true" stretch="true"> 

     <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8"> 
     </video> 
    </div>

異なる方法はflowplayer.orgウェブサイトでご利用いただけます。

出典

2017-12-14 12:58:56

HTMLビデオタグを使用してm3u8ファイルを再生する

答えて

関連する問題