この共有は、HTML5ラベルに基づいたカスタムビデオプレーヤーです。その中でも、Pause、Progress Dragging、ボリュームコントロール、フルスクリーンの再生などの機能が実装されています。
プレビュー私をクリックしてソースコードウェアハウスを表示してください。
核となるアイデアカスタムプレーヤーを作ることにさらされていない子供の靴の中には、ラベルのためにここにとどまると思います。
<ビデオコントロール=コントロールautoplay = autoplay> <source src = movie.ogg type = video/ogg/> </video>
Controlsプロパティは、インターフェイスにブラウザ独自のコントロールバーを表示するように設定されています。 UIの需要がない場合、その構築されたコントローラーはすでにほとんどのニーズを満たすことができます。もちろん、もしそうなら、あなたはこの共有=を見ることはありません。 =
コントロールバーを非表示にしてシミュレートします次に、カスタム関数を実装するプレーヤーの鍵は、以下の同じ位置を非表示にしないことです当社、および対応するシミュレーションUIおよびユーザーの動作動作のビデオ再生データ。
いくつかのコア関数と属性の使用myvid = document.getElementbyid（video1）; .duration //ビデオの全長を返す//シミュレーションビデオボリュームmyvid.volume // volume //ビデオを取得した後、ロードからmyvid.readystate // 0 = have_nothing -noを再生するように切り替えたときに決定されますオーディオについて/ビデオの準備ができているかどうか// 1 = has_metadata -about audio/video at metadata // 2 = has_current_data -data 3 = have_future_data-現在および少なくとも次のデータのフレームが利用可能です
実装におけるすべての重要なポイントで、進行状況バーのシミュレーションはより退屈です。その中で、ビデオラベルの現在の時間と期間の属性を使用して、現在の再生時間と合計再生時間を通じて、総長さに対するプログレスバーの位置を計算します。同時に、ユーザーの最終設定でのユーザーの長さを使用して、現時点でビデオの位置を逆転させることもできます。
コードのアイデアをドラッグします//コアコードサンプルvar dragdis = 0var proceswidth = xxx //ドラッグバーの全長（ 'body'）はドラッグスクリートの左側の左側の距離をドラッグすることです。同じ場所でレンダリングvideosource.pause（）}）。 （左<0）{左= 0} dragtarget.css（{左：左}）dragprocess.css（{width：left}）。 ProcessWidth * duration //ドラッグ後にビデオの正しい再生位置を計算するしたがって、ボリュームの制御は基本的に上記の動作と同じです。したがって、著者は、進行状況を介してボリュームと進行状況セクションを判断し、ボリュームの制御をドラッグします。
ビデオストリーミング状態を照会して再生する前に、ロードアニメーションを制御しますfunction ifstate（）{var state = videosource.readystate if（state === 4）{// （ 'body'）。 fstate、10）}} setimeout（Ifstate、10）コアコントロールパーツは、その中には、ソースコードをクリックして、断片化したニーズがあります。ビデオプレーヤー全体の基本的な機能が実現されます。
上記は、この記事のすべての内容です。