일시 정지, 진행 드래그, 볼륨 조절, 전체 화면 재생이 가능한 H5 플레이어 맞춤형 구현

이번에는 재생, 일시정지, 진행 드래그, 볼륨 조절, 전체 화면이 가능한 H5 플레이어의 맞춤 구현을 소개합니다. Notes 실제 사례를 살펴보겠습니다.

이 공유는 HTML5 태그를 기반으로 구현된 맞춤형 비디오 플레이어입니다. 재생 일시 정지, 진행 드래그, 볼륨 조절, 전체 화면 등의 기능을 구현합니다.

효과 미리보기

소스 코드 창고를 보려면 여기를 클릭하세요.

핵심 아이디어

커스텀 플레이어 제작에 접해본 적이 없는 어린이 신발도 있을 것이라고 생각하며, 태그에 대한 이해는 여기서 그칠 것입니다.

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

controls 속성이 설정되면 브라우저와 함께 제공되는 컨트롤 막대가 인터페이스에 표시됩니다. UI에 대한 요구 사항이 없다면 내장된 컨트롤러를 통해 이미 대부분의 요구 사항을 충족할 수 있습니다. 물론 그렇다면 이 공유는 보이지 않을 것입니다 =. =

컨트롤 바 숨기기 및 시뮬레이션

커스텀 기능을 갖춘 플레이어 구현의 핵심은 네이티브 컨트롤러를 사용하지 않는다는 점입니다. 숨긴 후 아래와 같은 위치에서 html과 css를 통해 시뮬레이션을 해야 합니다. 스타일, 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

H5의 비디오 태그가 mp4 파일을 재생할 수 없는 문제를 해결하는 방법

html5에 새로 추가된 태그는 무엇입니까

위 내용은 일시 정지, 진행 드래그, 볼륨 조절, 전체 화면 재생이 가능한 H5 플레이어 맞춤형 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!