HTML5 VideoAPI、独自のWebビデオプレーヤーを構築：戦闘へのWebフロントエンドの取得

この記事ではVideoAPI HTML5のビデオプレーヤーは、カスタム、提供HTML5のvideoタグを使用する必要だけでなく、HTML5のJavascriptAPIへの拡張を提供している操作を行うことを申し出使用されます。

まず、基本的な

1.使用法

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

注：オーディオとビデオの両方の要素の開始タグと終了タグを含める必要がありますを使用することはできません

2.重要なHTML属性

コントロール：ontrol：この属性が存在する場合、そのような再生ボタンとして、ユーザーコントロールに表示されます。各ブラウザの再生コントロールが同じではありませんが、すべて同じを使用して、新しい位置へのジャンプの開始と終了を制御し、音量を調整することができます
自動再生：自動再生を：この属性が存在する場合は、ビデオの再生をすぐに準備ができた後。あなたが自動再生属性を設定しない場合、ユーザー再生ボタンをクリックする必要がありますが、オーディオファイルを再生します。
ループ：ループ:(ループが）もう一度最初から再生を開始し、その後ときに、オーディオ達し終わりブラウザに指示し、
PRELOADオート、のmetE、なし：オーディオをダウンロードする方法をブラウザに指示します

• オート：ユーザーが再生ボタンをクリックしたときに再生することができるようにするために、ファイル全体をダウンロードするには、ブラウザをしてみましょう。もちろん、ダウンロードプロセスがバックグラウンドで、ウェブの訪問者は、ダウンロードを待つ必要はありません完全にはなく、Webページを表示することは依然として自由です。
• メタ：決定する（例えば、オーディオの合計時間など）いくつかの基本的な情報に十分である、オーディオ・ファイルの先頭にデータブロックを取得するには、ブラウザに伝えます
• なし：**は事前にダウンロードしなくても、ブラウザに指示します。適切にこれらの値を使用して、帯域幅を節約することが可能です。

あなたがプリロード属性を設定しない場合、ブラウザは事前にダウンロードしたかどうかを決定します。この時点では、治療は、異なるブラウザで同じではありません。ほとんどのブラウザでは、デフォルトとしてオートますが、Firefoxは、メタデータのデフォルト値です。しかし、これはプリロード財産規則ではないことをしてくださいノートは厳密に施行する必要がありますが、ブラウザ上でのみご意見。状況に応じて、あなたのブラウザの設定を無視することができます。（一部の古いブラウザではプリロードプロパティに応じて気にしないでください。）

3.一般的なイベント

イベント名：説明
oncanplayスクリプトファイルの準備ができたら、あなたは（バッファの先頭に十分である）、実行の再生を開始することができます。
ontimeupdate：ときに再生位置変更（例えば場合、ユーザ別の場所への高速媒体）スクリプト。
onendedメディアが最後に到達したときにすると、スクリプトの実行（メッセージなど「見ていただきありがとうございます」のように送信することができます）：。

4.一般的な方法

メソッド名：の説明を
再生（） ：オーディオ/ビデオ再生を開始
PAUSE（）現在のオーディオ/ビデオの再生を一時停止します：

共通APIのプロパティ

属性名：辞書
DURATION：戻り値（秒）現在のオーディオ/ビデオの長さは
一時停止：セットまたはリターンオーディオ/ビデオが一時停止された
CURRENTTIME：セットまたはリターン（秒）現在の再生位置のオーディオ/ビデオ
エンド：オーディオへの復帰/ビデオの再生が終了しているされています

第二に、独自のプレーヤーを作成します

私たちは、以下の機能を実現するためにJavaScriptのコントロール再生コントロールの動作（カスタム再生コントロール）を使用します。

• 自身プレーヤコントロールバー行い、その後、ほとんどのビデオの下に移動する利用HTML + CSSは、
• ビデオのローディングローディング効果
• 再生、一時停止
• 現在の表示の合計時間と長時間再生
• プログレスバーを再生
• フルスクリーン表示

1.再生コントロール

<figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
        <video src="./video/mv.mp4"></video>
        <div class="controls">
            <!-- 播放/暂停 -->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!-- 全屏 -->
            <a href="javascript:;" class="expand fa fa-expand"></a>
            <!-- 进度条 -->
            <div class="progress">
                <div class="loaded"></div>
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!-- 时间 -->
            <div class="timer">
                <span class="current">00:00:00</span> /
                <span class="total">00:00:00</span>
            </div>
            <!-- 声音 -->
        </div>
    </div>
</figure>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

上記のすべてのHTMLコードで、.controlsクラスは、再生コントロールHTML、CSSコードの参照です：

<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/player.css">

再生ボタンを表示するために、そしてので私が使用するフォント、アイコン、アイコン

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要素を使用するすべてのletのgetのjavascriptのコードを書くことから始めましょう：

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;
    }
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

プログレスバーを再生する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.フルスクリーン

この関数は、グローバルAPIのHTML5を使用することにより提供することができます。webkitRequestFullScreenは、ビデオとは何の関係も達成していません。

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