一時停止、進行ドラッグ、ボリュームコントロール、全画面再生が可能な H5 プレーヤーのカスタマイズされた実装

今回は、再生、一時停止、ドラッグの進行、ボリューム コントロール、全画面表示ができる H5 プレーヤーのカスタム実装をお届けします。 メモ 実際のケースを見てみましょう。

この共有は、HTML5 タグに基づいて実装されたカスタムビデオプレーヤーです。再生の一時停止、進行中のドラッグ、音量調整、全画面表示などの機能を実装します。

エフェクトのプレビュー

ここをクリックしてソース コード ウェアハウスを表示します。

核となるアイデア

カスタムプレーヤーの作成に一度も触れたことのない子供たちの靴もきっとあり、タグの理解はここで止まっていると思います。

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
</video>

controls 属性を設定すると、ブラウザーに付属のコントロール バーがインターフェイスに表示されます。 UI に要件がない場合は、組み込みの コントローラー でほとんどのニーズをすでに満たすことができます。もちろん、その場合、この共有 = は表示されません。 =

コントロールバーを非表示にしてシミュレートします

カスタム関数を使用してプレーヤーを実装するための鍵は、非表示にした後、以下の同じ位置で HTML と CSS を通じてシミュレートすることです。 style は、js を使用して vedio タグによって公開されるインターフェイス関数とプロパティを呼び出し、ユーザーの操作動作を検出して、UI とビデオ再生データの対応する変更を同期的にシミュレートします。

いくつかのコア関数と属性の使用

myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

すべての実装における重要なポイントは、進行状況バーのシミュレーションです。 video タグの currentTime 属性とduration 属性を使用して、合計再生時間に対する現在の再生時間の比率を通じて、全長に対するプログレス バーの位置を計算できます。同時に、プログレスバーをドラッグしてユーザーが最後に設定した長さを使用して、現時点でビデオが再生される位置を逆計算することもできます。

ドラッグコードのアイデア

//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
    dragTarget.css({ //拖拽按钮
        left: dragDis
    })
    dragProcess.css({ //进度条(蓝色进度条)
        width: dragDis
    }) // 令进度条和拖拽按钮渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $(&#39;蓝色拖拽条&#39;).width() / processWidth * duration //拖拽后计算视频的正确播放位置
})

同様に、ボリュームコントロールも基本的に上記の動作と同じなので、ソースコードでは、作者はボリュームと進行部分を判断するために異なる要素を使用して、ドラッグコントロールを実行するかどうかを決定します。進行状況やボリューム。

ビデオストリームのステータスをクエリすることで、再生前の読み込みアニメーションを制御します

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //状态为4即可播放
        videoPlayer()
    } else {
        $('.play-sym-wrapper').remove()
        $(&#39;body&#39;).append(&#39;<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

興味のある学生は、ソースコードのHTMLをクリックして再生することができます。一時停止、音量の保存など。ビデオプレーヤー全体の基本機能はかなりよく実装されています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5 の video タグが mp4 ファイルを再生できない問題を解決する方法

html5 で新しく追加されたタグとは何ですか

以上が一時停止、進行ドラッグ、ボリュームコントロール、全画面再生が可能な H5 プレーヤーのカスタマイズされた実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。