Heim > Artikel > Web-Frontend > So verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code)

So verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code)

不言Original: 2018-09-11 17:16:1611015Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Videojs zur Implementierung der Videolisten-Loop-Wiedergabe (vollständiger Code). Ich hoffe, dass er für Sie hilfreich ist.

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

Verwandte Empfehlungen:

Wie implementiert man einen HTML5-Wiedergabevideostream oder eine Wiedergabevideoliste? _html/css_WEB-ITnose

So fügen Sie den Webvideocode hinzu, um die nächste Episode automatisch abzuspielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 循环

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in Operatoren und Ausdrücke in JavaScriptNächster Artikel：Einführung in Operatoren und Ausdrücke in JavaScript

In Verbindung stehende Artikel

Mehr sehen