How to use videojs to implement video list loop playback (complete code)-JS Tutorial-php.cn

How to use videojs to implement video list loop playback (complete code)

不言

Release： 2018-09-11 17:16:16

Original

11000 people have browsed it

The content of this article is about how to use videojs to implement video list loop playback (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>庭审直播</title>
    <link rel="stylesheet" href="css/base.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="js/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="js/iview/dist/styles/iview.css">
    <script src="js/iview/dist/iview.min.js"></script>
    <!--引入播放器样式-->
    <link href="js/videojs/css/video-js.min.css" rel="stylesheet">
    <!--引入播放器js-->
    <script src="js/videojs/js/video.min.js"></script>
    <script src="js/videojs/js/videojs-flash.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .video-js {
           /*  position: inherit !important; */
    }
    .video{
        width:50%;
        padding:0px !important;
        float:left;
    }
    .video-div{
         float:left;
            width:45%;
            margin-left: 35px;
            background:#3e3b3b00;
    }
    .dp-center{
        background: #403f3f;
    }
    .video-list{
           margin: 5px 10px 10px 10px;
        padding: 5px 0px;
        max-height: 330px;
        list-style: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .video-list li {
        float: left;
        margin: 0;
        padding-left:15px;
        width: 175px;
        height: 140px;
    }
    .text_align_center{
        text-align:center;
        color:#fff;
    }
    a{
       text-decoration: none;
    }
    </style>
  </head>
<body>
    <div id="app" class="dp-item dp-item-3">
        <div>
             <div>
                <div class="dp-tit-btn btn6">
                    庭审直播
                </div>
            </div>
            <!-- 简介 -->
            <div>
                <div>
                    <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered">
                        <!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">   -->
                    </video>
                </div>
                
                <div>
                    <ul>
                        <li v-for="(item,index) in listItem">
                            <a id="video1" href="#" title="民间借贷纠纷">
                                <img v-bind:src="[item.image]" width="120px" height="80px" border="0">
                                <div class="video_list_explain text_align_center">{{item.title}}</div>
                                <div class="video_list_date text_align_center">{{item.dateTime}}</div>
                            </a>
                        </li>
                    </ul>
                    </div>
            </div>
        </div>
    </div>
 
<script type="text/javascript">
// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
videojs.options.flash.swf = &#39;js/videojs/swf/video-js.swf&#39;;
 
var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        visible: false,
        listItem:[
            {title:"民间借贷纠纷1",isplay:false, type:"video/mp4", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷2", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷3", isplay:false, type:"video/mp4", url: "http://7xn4dt.com1.z0.glb.clouddn.com/migo_vedio_720.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷4", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/jsxzxyfy/20180910/55pXgd/55pXgd_m_1.jpg", dateTime:"2018-09-10 16:30"},
        ]
    },
    mounted:function(){
        this.show();
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? (&#39;0&#39; + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? (&#39;0&#39; + d) : d;
        let h = date.getHours();
        h = h < 10 ? (&#39;0&#39; + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? (&#39;0&#39; + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? (&#39;0&#39; + s) : s;
        return y + &#39;-&#39; + MM + &#39;-&#39; + d + &#39; &#39; + h + &#39;:&#39; + m + &#39;:&#39; + s;
      }
    },
    methods: {
        show: function () {
            this.visible = true;
        }
    }
});
 
 
var list = vm.listItem;
var i = 0;
$(function(){
    var source = document.getElementById("video-source");
    var player = videojs("my-player", {
        "width":"450px",
        "height":"282px",
        "poster":"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",
        "autoplay":true,
        "controls": true,
        "sources": [{
              src: list[i].url,
              type: list[i].type
          }],
 
    }, function(){
        this.on(&#39;loadeddata&#39;,function(){
 
        })
        this.on(&#39;ended&#39;,function(){
             i++;
             if(i >= list.length){
                i = 0;
              }
              var videoObj = list[i];
              this.src({type: videoObj.type, src: videoObj.url});
              this.play();
        })
 
    });
});
 
</script>    
</body>
</html>

Copy after login

Related recommendations:

How to implement HTML5 video streaming or video list playback? _html/css_WEB-ITnose

How to add the web video code to automatically play the next episode

The above is the detailed content of How to use videojs to implement video list loop playback (complete code). For more information, please follow other related articles on the PHP Chinese website!