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

最新推荐文章于 2025-05-26 14:46:07 发布

原创最新推荐文章于 2025-05-26 14:46:07 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#videojs #m3u8

Web 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用HTML5、JavaScript及多种视频处理库搭建音视频播放器的过程，包括视频加载、播放控制、循环播放设置及播放列表管理等关键环节。通过实际案例，深入解析了如何解决播放器在不同环境下的兼容性问题，以及如何利用视频处理库提升播放质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实习遇到的问题，记录：

<!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>