一个页面播放多个视频

一个页面播放多个视频


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>videojs视频播放:video.xxxtitle>
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.xxxh1>
<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 += '
  • + item.id + '">' + '

    ' + item.name + '

    '
    + // ''+ // autoplay="autoplay" ' item.id + '" class="videoClass video-js vjs-default-skin vjs-big-play-centered" controls muted>+ item.url + '" type="' + item.type + '">' + '' + '



  • '
    ; //视频实时播放 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>

    你可能感兴趣的:(视频,页面,videojs,h5,多个,前端)