前端video标签播放m3u8格式视频

前端video标签播放m3u8格式视频
效果如下：

在这里插入图片描述

1、引入以下js和css
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
    
    <style>
        .video-js
        .vjs-tech {
            position: relative !important;
        }
        .active{
            background-color:#00bbff !important;
        }
    </style>
    
2、html代码
<body style="overflow-y:auto;">
<div class="contents marginbot">
    <div>
        <table class="table table-striped table-bordered" style="height: 95%;">
            <tbody id="tview_list">

            </tbody>
        </table>
    </div>
</div>
</body>


3、javascrip代码
<script type="text/javascript">
        function selectList() {
            var myLoad;
            $.ajax({
                type: "POST",
                async: false,
                url: 'archives/fetchCameraList',
                data: {
                    XKZBH: XKZBH
                },
                beforeSend: function () {
                    myLoad = layer.load();
                },
                error: function (aa) {
                    layer.close(myLoad);
                    layer.msg('服务器忙', {icon: 5, shade: [0.5, '#000'], time: 1000});
                },
                success: function (data) {
                    layer.close(myLoad);
                    var data = data['data'];
                    if(data && data.length > 0){
                        var tr1 = $('<tr style="height: 95%;"></tr>');
                        var tr2 = $('<tr id="titleTr"></tr>');
                        $.each(data,function (index,rowData) {
                            var M3u8Url = getObjToString(rowData["DeviceUrl"]["M3u8Url"]);
                            var Title = getObjToString(rowData["Title"]);
                            if(index == 0){
                                tr1.append('<td colspan="'+(data.length)+'" style="text-align: center;"><div id="videobox" style="height: 95%;"><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 95%;">' +
                                    '<source id="source" src="'+M3u8Url+'" type="application/x-mpegURL"></source></video></div>' +
                                    '</td>');
                                $("#tview_list").append(tr1);
                                tr2.append('<td id=\'clickButton'+index+'\'  style="text-align: center;cursor: pointer;" onclick="changeVideo(\''+M3u8Url+'\',\''+("clickButton"+index)+'\')">' + Title + '</td>');
                                $("#tview_list").append(tr2);
                            }else{
                                $("#titleTr").append('<td id=\'clickButton'+index+'\' style="text-align: center;cursor: pointer;" onclick="changeVideo(\''+M3u8Url+'\',\''+("clickButton"+index)+'\')">' + Title + '</td>')
                            }
                        });
                        $("#clickButton0").addClass('active').trigger('click');
                    }
                }
            });
        }

	function changeVideo(vdoSrc,clickButtonId) {
            $("td[id^='clickButton']").removeClass('active');
            $("#"+clickButtonId).addClass('active');
            var player = videojs('myVideo');
            player.pause();
            player.dispose();
            document.getElementById('videobox').innerHTML = '';
            var str2 = '<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup="{}" style="width: 100%;height: 95%;">' +
                '<source id="source" src="' + vdoSrc + '" type="application/x-mpegURL"></source></video>';
            document.getElementById('videobox').innerHTML = str2;
            videojs('myVideo', {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImage: false,
                errorDisplay: false
            },function () {
                this.play();
            });
        }
    </script>

注意：
1、由于实现videoJS的视频切换，不能等同于常规的mp4等格式视频，直接切换地址，而是需要在点击切换的时候进行销毁原来的videoJS；
2、重新添加一个video标签，对其赋值视频路径；
3、添加到页面后进行再次初始化！

===========================================================================
1、Video.js初始化有两种方式。
a:一种是在<video>标签里面加上class="video-js"和data-setup='{}'属性。两者缺一不可。
b:另外一种初始化 video.js 的方法是通过JS，格式：var player = videojs('myVideo');

来源：CSDN

作者：ernesto_ji

链接：https://blog.csdn.net/qq_38407462/article/details/103689268

标签

m3u8

data