検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Video.js を使用して Web プレーヤーを作成する (グラフィック チュートリアル)

Video.js を使用して Web プレーヤーを作成する (グラフィック チュートリアル)

亚连
亚连オリジナル
2018-05-18 13:59:234009ブラウズ

以下は、私がコンパイルした Video.js Web プレーヤーです。興味のある学生はご覧ください。

1. ステップ 1

<link href="video-js.css" rel="stylesheet" type="text/css">  
 <!-- video.js must be in the <head> for older IEs to work. -->  
 <script src="video.js"></script>

2. ステップ 2

<script>  
   videojs.options.flash.swf = "video-js.swf";  
 </script>

4. ステップ 4

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}">      
   <source src="wangdeshun.mp4" type="video/mp4"/>      
   <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that 
   <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
   </p>      
 </video>

このようにして、オンラインビデオを再生できます。とても便利ではないでしょうか？

ビデオが再生されているかどうかを確認してください

<script>  
    var player = videojs("example_video_1");  
    // 检测播放时间  
    player.on(&#39;timeupdate&#39;, function () {    
        console.log(&#39;当前播放时间：&#39; = player.currentTime());  
    }  
    });  
    // 开始或恢复播放  
    player.on(&#39;play&#39;, function() {    
        console.log(&#39;开始/恢复播放&#39;);  
    });  
    // 暂停播放  
    player.on(&#39;pause&#39;, function() {    
        console.log(&#39;暂停播放&#39;);  
    });  
/在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   
    setTimeout(function(){  
        player.pause();  
    },10000);  
 </script>

携帯電話で使用している場合は、

player.on(&#39;timeupdate&#39;, function () {    
    // 如果 currentTime() === duration()，则视频已播放完毕  
    if (player.duration() != 0 && player.currentTime() === player.duration()) {  
            // 播放结束  
        }  
    });

が必要です。上記は私があなたのためにコンパイルしたVideo.js Webプレーヤーです。未来。

関連記事:

JavaScriptで入力した数値を通貨形式に自動変換する方法(コード添付)


vue.jsを使って価格書式設定を実装する方法(コード添付)


jsネイティブコード双方向データバインディングを実装します (直接使用可能、すでにカプセル化されています)

以上がVideo.js を使用して Web プレーヤーを作成する (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Javascriptで入力した数値を通貨形式に自動変換する方法（コード添付）次の記事：Javascriptで入力した数値を通貨形式に自動変換する方法（コード添付）

関連記事

続きを見る