hls.js 让浏览器支持m3u8视频流播放的插件

hls.js 让浏览器支持m3u8视频流播放的插件

hls.js 让浏览器支持m3u8视频流播放的插件

使用方式:

第一步引入bfwone 加

第二步use插件

第三步配置参数

var video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["hls"], function() {
                var video = document.getElementById('video');
                if (Hls.isSupported()) {
                    var hls = new Hls();
                    hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED, function() {
                        video.play();
                    });
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
                    video.addEventListener('loadedmetadata', function() {
                        video.play();
                    });
                }
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <video id="video" controls width="100%"></video>
</body>
</html>



立即下载hls.js查看所有js插件

网友评论0

程序员在线工具箱