M3U8视频播放器源代码,在制作某个页面的时候,发现部分欧盟浏览器无法播放,手机端却可以正常播放,查询原因是因为欧盟浏览器部分不支持,现在分享一份亲测可用的m3u8视频播放器代码,直接放到需要的html或者php文件里面就可以了。

<script src="/js/jsa/hls.min.js"></script>
<video id="video" controls width="100%"></video>
<script>
var video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('{content:ext_spurl}');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = '{content:ext_spurl}';
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }
</script>

就这么一段代码,其中{content:ext_spurl}是动态调用标签,主要是针对后台添加的字段进行调用。另外主要功能实现是通过hls.min.js文件,这个必不可少。

完成,其他css样式的调整就按照自己的网站的样式进行修正即可。

hls.min.js下载

引用的时候注意需要修改成自己的文件路径,其他就没什么需要注意的了。