HTML5 사용자 정의를 사용하여 플레이어 코드 공유 실현

이 글에서는 커스텀 html5 플레이어를 처음부터 구현하기 위한 샘플 코드를 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집기를 따라가서 살펴보세요

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

효과 미리보기

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

핵심 아이디어

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

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

컨트롤 속성이 설정되면 브라우저와 함께 제공되는 컨트롤 막대가 인터페이스에 표시됩니다. 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>&#39;)
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

핵심 제어 부분이 완료되었습니다. 관심 있는 학생들은 소스 코드의 HTML에서 클릭하여 재생할 수 있습니다. 일시중지, 볼륨 저장 등 다양한 기능을 즐겨보세요. 전체 비디오 플레이어의 기본 기능은 매우 완벽합니다.

위 내용은 HTML5 사용자 정의를 사용하여 플레이어 코드 공유 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!