我如何将这个m3u8嵌入我的网页?

时间:2015-03-26 05:29:16

标签: html streaming

我的头衔说明了一切。我有m3u8文件,我需要嵌入

尝试使用此方法(如下),但它说“不支持视频格式或mime类型”

<div id='player'>
            <video width=100% height=100% src="http://cdncities.com/deranalive/deranalive/playlist.m3u8" type="application/x-shockwave-flash" controls autoplay>
            </video>

</div>

我试过jwplayer wizard,在那里它有效,但它不是免费的....我不知道该怎么做。

谁知道一个免费的球员?或该代码的解决方案?

感谢。

2 个答案:

答案 0 :(得分:3)

简单先生,您可以关注此文件:

&#13;
&#13;
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://cdncities.com/deranalive/deranalive/playlist.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'http://cdncities.com/deranalive/deranalive/playlist.m3u8';
    video.addEventListener('canplay',function() {
      video.play();
    });
  }
</script>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

只有Safari 6.0+具有本机HLS支持。您不能在桌面上使用HTML5。

通过Flash支持HLS的免费播放器是mediaelement.js

mediaelement.js - HLS Demo