videojs を使用してビデオリストのループ再生を実装する方法 (完全なコード)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

videojs を使用してビデオリストのループ再生を実装する方法 (完全なコード)

不言

Sep 11, 2018 pm 05:16 PM

この記事の内容は、videojs を使用してビデオリストのループ再生を実装する方法 (完全なコード) です。必要な方は参考にしていただければ幸いです。

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

ログイン後にコピー

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7695

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。