使用videojs连续播放m3u8格式的视频

157 阅读 0 评论 104 点赞

我是靠谱客的博主忧心眼睛，这篇文章主要介绍使用videojs连续播放m3u8格式的视频，现在分享给大家，希望可以做个参考。

实习遇到的问题，记录：

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/video-js.css" />
    <script type="text/javascript" src="/js/video.min.js"></script>
    <script type="text/javascript" src="/js/videojs-contrib-hls.js"></script>
</head>
<body>
<div id="shipin">
    <div id="video" style="width:900px;height:500px;margin-top:20px;margin-left: 20px;">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}" height=500px width=900px>
        </video>
    </div>
    <input type="text" style="display:none"id="vid" th:value="${videoArray}">
</div>
</body>
<script>

       var url = document.getElementById("vid").value;
       var vList = url.split(",");// 初始化播放列表
    var vLen = vList.length;
    var curr = vLen-1;//因为取路径的时候是倒序，所以选择从后向前播
    var video = document.getElementById("example_video_1");
    var options = {
        controls: true,
        preload: 'auto',
        loop: false, //注意：此地方一定要设置为false，不然会循环播放同一个视频

    };
    var player = videojs('example_video_1', options, function onPlayerReady() {
        play();
        video.addEventListener('ended', function(){
            play();
        });
    });

    function play() {
        player.src({
            src: vList[curr],
            type: 'application/x-mpegURL'//在重新添加视频源的时候需要给新的type的值
        })
        video.load();
        video.play();
        curr--;
        if(curr < 0){
            curr = vLen-1 ; //重新循环播放
        }

    }

</script>
</html>