HTML5 VideoAPI, 나만의 웹 비디오 플레이어 구축

　1. 기본 지식

　1. 사용법

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

　참고 : 오디오 및 비디오 요소에는 시작 태그와 끝 태그가 모두 포함되어야 하며 사용할 수 없습니다.

　2. 중요한 HTML 속성

　컨트롤: control: 이 속성이 나타나면 재생 버튼과 같은 컨트롤이 사용자에게 표시됩니다. 각 브라우저의 재생 컨트롤은 다르지만 목적은 동일합니다. 시작과 끝을 제어하고, 새 위치로 이동하고, 볼륨을 조정할 수 있습니다.

　자동 재생: 자동 재생: 경우 이 속성을 사용하면 비디오가 준비되는 즉시 재생됩니다. autoplay 속성이 설정되지 않은 경우 사용자가 재생 버튼을 클릭하면 오디오 파일이 재생되어야 합니다.

　loop: loop: (반복 재생) 오디오가 끝에 도달하면 처음부터 다시 재생을 시작하도록 브라우저에 지시합니다.

　preload: auto, mete, none: 브라우저에 오디오 다운로드 방법을 알려줍니다.

• auto: 사용자가 재생 버튼을 클릭할 때 재생할 수 있도록 브라우저가 전체 파일을 다운로드하도록 합니다. 물론 다운로드 프로세스는 백그라운드에서 수행되므로 웹 페이지 방문자는 다운로드가 완료될 때까지 기다릴 필요 없이 원하는 대로 웹 페이지를 계속 볼 수 있습니다.

• meta: 먼저 오디오 파일의 시작 부분에서 데이터 블록을 가져오도록 브라우저에 지시합니다. 몇 가지 기본 정보(예: 오디오의 총 재생 시간)를 결정하는 데 충분합니다.

• 없음: ** 브라우저에 미리 다운로드하지 말라고 알려주세요. 이러한 값을 적절하게 사용하면 대역폭을 절약할 수 있습니다.

preload 속성이 설정되지 않은 경우 브라우저가 미리 다운로드 여부를 결정합니다. 브라우저마다 이를 다르게 처리합니다. 대부분의 브라우저는 기본값으로 auto를 사용하지만 Firefox의 기본값은 메타데이터입니다. 그러나 이 사전 로드 속성은 엄격하게 구현되어야 하는 규칙이 아니라 브라우저에 대한 제안일 뿐이라는 점도 참고하세요. 상황에 따라 브라우저는 귀하의 설정을 무시할 수 있습니다. (일부 오래된 브라우저에서는 preload 속성을 신경쓰지 않습니다.)

3. 일반적인 이벤트

이벤트 이름: 설명

oncanplay

Strong>: 파일이 재생을 시작할 준비가 되었을 때(버퍼링이 시작하기에 충분할 때) 실행되는 스크립트입니다.

Ontimeupdate: 재생 위치가 변경될 때(예: 사용자가 미디어의 다른 위치로 빨리 감는 경우) 실행되는 스크립트입니다.

　onended: 미디어가 끝에 도달했을 때 실행되는 스크립트입니다("시청해 주셔서 감사합니다"와 같은 메시지를 보낼 수 있음).

　4. 자주 사용되는 메소드

　메서드 이름: 설명

　play(): 오디오/비디오 재생 시작

　pause(): 현재 재생 중인 오디오/비디오를 일시 중지합니다

　5. 일반적으로 사용되는 API 속성

　속성 이름: 설명

기간: 현재 오디오/비디오의 길이(초)를 반환합니다.

　일시중지됨: 오디오/비디오가 일시중지되는지 여부를 설정하거나 반환합니다.

p>

　currentTime: 오디오/비디오의 현재 재생 위치를 설정하거나 반환합니다(초 단위).

　ended: 오디오/비디오 재생 여부를 반환합니다. 영상이 종료되었습니다

　더 많은 속성, 이벤트 및 방법을 보려면 w3school을 참조하세요

　 2. 나만의 플레이어 만들기

　우리는 다음 기능을 달성하기 위해 재생 컨트롤(사용자 정의된 재생 컨트롤)의 동작을 제어하기 위해 JavaScript를 사용합니다:

• HTML+CSS를 사용하여 자신만의 재생 제어 막대를 만든 다음 동영상 하단에 배치하세요 p>

• 동영상 로딩 로딩 효과

• 재생, 일시중지

• 총 재생 시간 및 현재 재생 시간 표시span>

• 재생 진행률 표시줄

• 전체 화면 표시

　1.재생 컨트롤

6c04bd5ca3fcae76e30b72ad730ca86d24203f2f45e6606542ba09fd2181843a
    614eb9dc63b3fb809437a716aa228d24视频播放器figcaption>    960305b2d2d11d78b5fbf13b8f6cd3a5
        4fbaeb89c414d3001b07593cd97daadbvideo>        7dae60e36100c4eace45332cdbedbc1c
            
            afc39c62532c2f5b4ff2c2d622753f61a>            
            903126d2fcb06e58dc5506f63a5f3432a>            
            a35e07b05cdc5a8112b4e83a70540ae5
                6bc1624e40c51fb47248d9776cdbc377p>                4932cd0e4246f1060d9ad3ec2e132edap>                d2b1eb8a0af74f224f09553a0d5e8902p>            p>            
            577caf9a2a30a95b55e2d248c1bd55fe
                250738d4b471ad9d04979c78de65ac6100:00:00span> /                cfa76f572389f016ebcf57374811767b00:00:00span>            p>            
        p>    p>figure>

　위는 모두 HTML 코드입니다. .controls 클래스는 CSS 코드를 인용하는 재생 컨트롤 HTML입니다.

fa9942f7d36672b883da929faef782de2fa4fecc03b83976a60f411d3d719e7e

　재생 버튼 등의 아이콘을 표시하기 위해 폰트 아이콘을 사용했습니다

　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 요소를 가져옵니다.

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;
    }

　　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.全屏显示

　　这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关：

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

　　经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。

위 내용은 HTML5 VideoAPI, 나만의 웹 비디오 플레이어 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!