hls网页播放器实现

hls网页播放器实现

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。本事记录内容只要是使用bootstrap的modal框实现点击按钮弹出视频框。播放的视频格式是hls(m3u8).video.js的详细使用方法可参考这里

1. 文件引入

<-设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件->

2. 模态框设置

    

        

            

                
                    ×
                
                

                    模态框（Modal）标题
                
            
            

				//video 标签就被动态添加到这里
            
            

                
                    关闭
                
            
        

    

3. js函数

/动态添加播放器，显示模态框
            function playVido() {

                $("#modal-body").append("\n")
                var videoUrl = "http://zhibo.jinlu666.com:10080/frecord/jinlu107/20190124/20190124140000/jinlu107_record.m3u8";
                $("#hls-source").attr("src", videoUrl);
                var myplayer = videojs('hls-video');
                myplayer.play();
                $('#myModal').modal('show');
            }
            
            **
             * 该方法解决模态框关闭时，视频仍然播放的问题！思路就是在关闭的时候把播放器移除掉，在播放的时候重新动态添加播放器即可
             */
            function closeVideo() {
                $("#hls-source").attr("src", "");
                var oldPlayer = document.getElementById('hls-video');
                videojs(oldPlayer).dispose();
                $('#myModal').modal('hide');
            }