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.再生コントロール

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

<link rel="stylesheet" href="./css/font-awesome.css"><link rel="stylesheet" href="./css/player.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;

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);
};

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

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;
    }

//播放进度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;
};

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