HTML5 VideoAPI、独自の Web ビデオ プレーヤーを構築

1. 基礎知識

1. 使い方

<video src="./video/mv.mp4">video>

注: audio 要素と video 要素には開始タグと終了タグの両方が含まれている必要があり、使用できません

2. 重要HTML 属性

controls: ontrol: この属性が表示される場合、再生ボタンなどのコントロールがユーザーに表示されます。各ブラウザの再生コントロールは異なりますが、目的は同じです。開始と終了を制御したり、新しい位置にジャンプしたり、音量を調整したりできます

autoplay: autoplay: この属性が表示される場合、ビデオは次のようになります。準備ができたら今すぐプレイしてください。 autoplay 属性が設定されていない場合は、ユーザーが再生ボタンをクリックしたときにオーディオ ファイルが再生される必要があります。

loop：loop：（ループ再生）オーディオが最後に達したら最初から再生を再開するようにブラウザに指示します

preload：auto、mete、none：オーディオのダウンロード方法をブラウザに指示します

• auto: ユーザーが再生ボタンをクリックしたときに再生できるように、ブラウザーにファイル全体をダウンロードさせます。もちろん、ダウンロード プロセスはバックグラウンドで実行されるため、Web ページの訪問者はダウンロードが完了するまで待つ必要がなく、必要に応じて Web ページを表示できます。

• meta: 最初に音声ファイルの先頭にあるデータ ブロックを取得するようにブラウザに指示します。これは、いくつかの基本情報 (音声の合計時間など) を決定するのに十分です

• none : ** 事前にダウンロードしないようにブラウザに指示します。これらの値を適切に使用すると、帯域幅を節約できます。

preload 属性が設定されていない場合、ブラウザーが事前ダウンロードするかどうかを決定します。ブラウザごとにこれの処理方法が異なります。ほとんどのブラウザはデフォルト値として auto を使用しますが、Firefox のデフォルト値はメタデータです。ただし、この preload 属性は厳密に実装する必要があるルールではなく、ブラウザーに対する単なる提案であることにも注意してください。状況によっては、ブラウザが設定を無視する場合があります。 (古いブラウザーの中には、preload 属性を考慮しないものもあります。)

3. 一般的なイベント

イベント名: 説明

oncanplay: ファイルの再生を開始する準備ができたときに実行されるスクリプト (バッファリングは、再生を開始するのに十分です)始める） ）。

ontimeupdate: 再生位置が変更されたときに実行されるスクリプト (ユーザーがメディア内の別の位置に早送りしたときなど)。

onended: メディアが最後に達したときに実行されるスクリプト (「ご覧いただきありがとうございます」のようなメッセージを送信できます)。

4. よく使われるメソッド

メソッド名：説明

play(): オーディオ/ビデオの再生を開始

pause(): 現在再生中のオーディオ/ビデオを一時停止します

5. よく使われるメソッドAPI属性

属性名: 説明

duration: 現在のオーディオ/ビデオの長さを秒単位で返します

paused: オーディオ/ビデオが一時停止されているかどうかを設定または返します

currentTime:オーディオ/ビデオを設定または返します ビデオ内の現在の再生位置 (秒単位)

ended: オーディオ/ビデオの再生が終了したかどうかを返します

その他のプロパティ、イベント、メソッドについては、w3school を確認してください

2. 独自のプレーヤーを構築します

JavaScript を使用して再生コントロール (カスタマイズされた再生コントロール) の動作を制御し、次の機能を実現します:

• HTML+CSS を使用して独自の再生コントロール バーを作成しますを選択し、ビデオの下部に配置します

• ビデオの読み込み読み込みエフェクト

• 再生、一時停止

• 合計再生時間と現在の再生時間の表示

• 遊ぶプログレスバー

• 全画面

1.再生コントロール

6c04bd5ca3fcae76e30b72ad730ca86d24203f2f45e6606542ba09fd2181843a
    614eb9dc63b3fb809437a716aa228d24视频播放器figcaption>    960305b2d2d11d78b5fbf13b8f6cd3a5
        4fbaeb89c414d3001b07593cd97daadbvideo>        7dae60e36100c4eace45332cdbedbc1c
            
            afc39c62532c2f5b4ff2c2d622753f61a>            
            903126d2fcb06e58dc5506f63a5f3432a>            
            a35e07b05cdc5a8112b4e83a70540ae5
                6bc1624e40c51fb47248d9776cdbc377p>                4932cd0e4246f1060d9ad3ec2e132edap>                d2b1eb8a0af74f224f09553a0d5e8902p>            p>            
            577caf9a2a30a95b55e2d248c1bd55fe
                250738d4b471ad9d04979c78de65ac6100:00:00span> /                cfa76f572389f016ebcf57374811767b00:00:00span>            p>            
        p>    p>figure>

上記はすべてHTMLコードです、.controlsクラスは再生コントロールHTML、引用符で囲まれたCSSコード:

fa9942f7d36672b883da929faef782de2fa4fecc03b83976a60f411d3d719e7e

再生ボタンやその他のアイコンを表示するために、フォントアイコンを使用しました

2.動画の読み込み 読み込みエフェクト

冒頭の動画を非表示にし、背景画像に置き換えます 動画が読み込まれるまで待って、ビデオを表示する前に再生できます

CSS:

.player {    width: 720px;    height: 360px;    margin: 0 auto;    background: #000 url(../images/loading.gif) center/300px no-repeat;    position: relative;}
 video {    display: none;    height: 100%;    margin: 0 auto;

3. 再生関数

まず、使用する DOM 要素を取得します:

var video = document.querySelector("video");var isPlay = document.querySelector(".switch");var expand = document.querySelector(".expand");var progress = document.querySelector(".progress");var loaded = document.querySelector(".progress > .loaded");var currPlayTime = document.querySelector(".timer > .current");var totalTime = document.querySelector(".timer > .total");

ビデオが再生できるようになったら、ビデオを表示します

//当视频可播放的时候video.oncanplay = function(){      //显示视频
      this.style.display = "block";      //显示视频总时长
      totalTime.innerHTML = getFormatTime(this.duration);
};

　　4.播放、暂停

　　点击播放按钮时显示暂停图标，在播放和暂停状态之间切换图标

//播放按钮控制isPlay.onclick = function(){        if(video.paused) {
            video.play();
        } else {
            video.pause();
        }        this.classList.toggle("fa-pause");
};

　　5.总时长和当前播放时长显示

　　前面代码中其实已经设置了相关代码，此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可，提供getFormatTime()函数：

function getFormatTime(time) {        var time = time  0; 
        var h = parseInt(time/3600),
            m = parseInt(time%3600/60),
            s = parseInt(time%60);
        h = h < 10 ? "0"+h : h;
        m = m < 10 ? "0"+m : m;
        s = s < 10 ? "0"+s : s; 
        return h+":"+m+":"+s;
    }

　　6.播放进度条

//播放进度video.ontimeupdate = function(){    var currTime = this.currentTime,    //当前播放时间
    duration = this.duration;       // 视频总时长
    //百分比
    var pre = currTime / duration * 100 + "%";    //显示进度条
    loaded.style.width = pre; 
     //显示当前播放进度时间
    currPlayTime.innerHTML = getFormatTime(currTime);
};

　　这样就可以实时显示进度条了，此时，我们还需要点击进度条进行跳跃播放，即我们点击任意时间点视频跳转到当前时间点播放：

//跳跃播放progress.onclick = function(e){    var event = e  window.event;
    video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};

　　7.全屏显示

　　这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关：

//全屏expand.onclick = function(){
     video.webkitRequestFullScreen();
};

　　经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。

以上がHTML5 VideoAPI、独自の Web ビデオ プレーヤーを構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。