hls网页播放器实现

hls网页播放器实现

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

1. 文件引入

<link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>

<-设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件->
<script>
    videojs.options.flash.swf = "video-js.swf";//此处的swf路径要改成自己的
</script>

2. 模态框设置

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     backdrop="false" keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeVideo()">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body" id="modal-body">
				//video 标签就被动态添加到这里
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="closeVideo()">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

3. js函数

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

                $("#modal-body").append("<video id=\"hls-video\" class=\"video-js vjs-default-skin  vjs-big-play-centered\" width=\"540px\" height=\"480px\"\n" +
                    "                       playsinline webkit-playsinline\n" +
                    "                       autoplay controls preload=\"auto\"\n" +
                    "                       x-webkit-airplay=\"true\" x5-video-player-fullscreen=\"true\" x5-video-player-typ=\"h5\">\n" +
                    "                    <source id=\"hls-source\" src=\"\" type=\"application/x-mpegURL\">\n" +
                    "                </video>\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');
            }