一个页面播放多个视频

梦里梦外; 2023-06-09 11:25 17阅读 0赞

# 一个页面播放多个视频 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>videojs视频播放:video.xxx</title>
    </head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <body>
    <h1>video.xxx</h1>
    <div id='video-div'></div>
    </body>
    </html>
    <script> var data = [{ "id":"1", "name":".mp4", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..mp4", "type":"video/mp4"}, { "id":"2", "name":".m3u8", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..m3u8", "type":"application/x-mpegURL"}, { "id":"3", "name":".ts", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..ts", "type":"video/MP2T"}, { "id":"4", "name":".avi", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..avi", "type":"video/x-msvideo"}, { "id":"5", "name":".wmv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..wmv", "type":"video/x-ms-wmv"}, { "id":"6", "name":".flv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..flv", "type":"video/x-flv"}, { "id":"7", "name":".flv", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..ogg", "type":"video/ogg"}, { "id":"8", "name":".mov", "url":"http://www.w3school.com.cn/example/html5/mov_bbb..mov", "type":"video/quicktime"}]; var html = ''; $(data).each(function(i, item) { html += '<li type-id="' + item.id + '">' + '<h2>' + item.name + '</h2>' + // '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+ // autoplay="autoplay" '<video style="width:100%;height:100%;" id="example_video_' + item.id + '" class="videoClass video-js vjs-default-skin vjs-big-play-centered" controls muted><source src="' + item.url + '" type="' + item.type + '">' + '</video>' + '</li></br><hr></br>'; //视频实时播放 setTimeout(function() { var myPlayer = videojs('example_video_' + item.id); videojs('example_video_' + item.id).ready(function() { var myPlayer = this; myPlayer.play(); }); }, 5000); }); document.getElementById("video-div").innerHTML=html; setTimeout(function() { var myPlayer = videojs('example_video_' + item.id); videojs('example_video_' + item.id).ready(function() { var myPlayer = this; myPlayer.play(); }); }, 5000); </script>