hls网页播放器实现

素颜马尾好姑娘i 2022-04-23 07:16 804阅读 0赞

## hls网页播放器实现 ##

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

#### 1. 文件引入 ####

#### 2. 模态框设置 ####

<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()">
                        ×
                    </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>
        </div>
    </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');
                }

[Link 1]: http://www.jq22.com/jquery-info404