HTML Video Etiketi ile m3u8 Dosyaları Oynatma

Bilgisayarlarıma ve iPhone'uma video akışı için HTTP Canlı Akışı (HLS) kullanmaya çalışıyorum. Apple'ın 'HTTP Canlı Akışına Genel Bakış' ve 'iPhone ve iPad için HTTP Canlı Aktarım Ortamı Oluşturma ve Dağıtma için En İyi Uygulamalar' bölümünü okuduktan sonra biraz takılıyorum. OradaHTML Video Etiketi ile m3u8 Dosyaları Oynatma

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"

Endişelenme:

Ben dosyayı MPEG-TS formatında ve Apple-önerilen ayarları ve Temel 3,0 profil kodlamak için benim kaynak dosya (bir mkv) ve kullanılmış ffmpeg aldı. Videoyu segmentlere ayırmak ve bir .m3u8 oynatma listesi oluşturmak için pre-compiled segmenting tool kullandım. çıkan dosya şuna benziyordu:

#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

bazı Example Playlist Files for use with HTTP Live Streaming karşı ve herhangi bir sorunları görmüyorum kontrol etti. Ayrıca VLC'de .m3u8 dosyasını oynatmayı denedim ve bir çekicilik gibi çalışıyor.

Ben dosyayı oynatmak için bir HTML sayfası oluşturduk:

<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>

Ayrıca bu sayfadan benim iPhone'da, Chrome, Safari çalışmaz. W3schools'taki html5 video etiketi örnekleri bilgisayarımda iyi çalışıyor ve yukarıda bahsedilen resmi Apple genel görünümü sayfama çok benzeyen bir HTML örneği veriyor. Yine de, kendi .m3u8 sayfasını ziyaret ettiğimde video oynatıcım tamamen yanıt vermiyor.

kaynak

2013-11-05 drucifer

Mediastreamvalidator aracının çıktısını gösterebilir misiniz? – vipw

Cevabınız için teşekkürler! Maalesef, parayı "gerçek" bir Apple geliştiricisi olarak reddetmedim, bu yüzden o özel aleti kullanmıyorum. Küçük bir başarı ile muhtemel bir yedek arıyordum. Bu cephede verebileceğiniz tavsiyeler memnuniyetle karşılanacaktır! – drucifer

Belki de dosyaları genel bir web sunucusuna koyabilirsiniz. Ücretsiz bir web sunucusuna ihtiyacınız varsa, micro Amazon EC2 örneğini kullanabilirsiniz. Sonra daha fazla araca erişimi olan biri bir göz atabilir. Aslında, bu beni web sunucunuzun döndürdüğü mim türleri hakkında merak ediyor ... Bunun işe yarayıp yaramadığını görün: http://stackoverflow.com/questions/6438680/http-live-streaming-not-working-on- apache/15696465 – vipw

Yanıtla biraz geç olabilirsiniz, ancak MIME type özniteliğini video etiketinde sağlamanız gerekir: type = "application/x-mpegURL". 16: 9 akışı için kullandığım video etiketi böyle görünüyor.

Hadi video öğesinin kimliği "olduğunu varsayalım: tarayıcının Video öğesinde HLS destekliyorsa ben.bourdin cevap ekleme

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

kaynak

2014-04-22 16:50:58

+12

Bu yanıtı başka biri test ettiyse, Chrome'da çalışmayacağını belirtmek gerekir. Edge'de iyi çalışıyor. Tarayıcı uyumluluğu için bir çözüm hakkında daha fazla bilgi için bu [cevap] 'ı (http://stackoverflow.com/a/23388308/4092887) kontrol edin. –

HLS, HLS'nin yerel tarayıcısı olmadığı için Chrome'daki bir sayfada yalnızca video etiketinde yayınlanmayacaktır. – HeidiWF

, en azından herhangi bir HTML tabanlı bir uygulamada, kontrol edebilirsiniz MyVideo canPlayType", daha sonra javascript aracılığıyla kullanabileceğiniz "" döndürür fonksiyonunu (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 fonksiyonu:

"" hayır suppo olduğunda tarayıcı belirtilen ses/video türünü destekleyen ne zaman büyük olasılıkla belirtilen ses/video türünü destekler zaman rt belirtilen ses/video türü için

"belki"

"muhtemelen" (sadece bunu kullanabilirsiniz doğrulama değeri tarayıcınızın belirtilen türle)

Umut bu yardım :)

Saygılarımızla desteklediğini daha emin olmak için!

kaynak

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>

Akış HLS veya kod yukarıdaki kullanarak m3u8 dosyaları. kenar tarayıcı, krom, opera mini (mobil tarayıcı) (pc krom ile çalışmaz) çalışır.

Tüm tarayıcılarda oynatmak için flash tabanlı ortam yürütücüsünü kullanın. media player to support all browser

kaynak

2017-01-03 09:53:35

Kullanım 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>

farklı yöntemler flowplayer.org web sitesinde mevcuttur.

kaynak

2017-12-14 12:58:56

HTML Video Etiketi ile m3u8 Dosyaları Oynatma

cevap

İlgili konular