전투에 웹 프런트 엔드를 얻기 : HTML5 VideoAPI가 자신의 웹 비디오 플레이어를 구축

HTML5가 제공하는의이 기사는 JavascriptAPI에 VideoAPI HTML5 비디오 제공하는 HTML5 비디오 태그를 사용하는 사용자 정의, 필요성을 할 것을 제안 선수뿐만 아니라 확장을 사용합니다.

첫째, 기본

1. 사용

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

참고 : 오디오와 비디오 요소가 모두 시작과 끝 태그를 포함해야 사용할 수 없습니다

2. 중요 HTML 속성

제어 : 조작부 :이 속성이 존재한다면, 예컨대 재생 버튼, 사용자 컨트롤에 표시. 각 브라우저 재생 제어 기능은 새로운 위치로 점프의 시작과 끝을 제어하고 볼륨 조절할 수 있습니다, 모두 같은 동일하지 않습니다,하지만 사용
자동 재생 자동 재생을 :이 속성이 존재하는 경우, 준비 후 즉시 비디오 재생. 당신은 자동 재생 속성을 설정하지 않으면, 사용자가 재생 버튼 오디오 파일을 재생합니다 클릭해야합니다.
루프 : 오디오 도달 끝이 후 처음의에서 다시 재생을 시작하면 루프 :( 루프) 브라우저에 지시
PRELOAD 자동, 벼, 없음 : 다운로드 오디오에 어떻게 브라우저에 지시

• 자동 : 사용자가 재생 버튼을 클릭하면 재생할 수있게하기 위해 전체 파일을 다운로드하는 브라우저를 보자. 물론, 다운로드 프로세스가 배경이며, 웹 방문자가 다운로드 기다릴 필요가 없습니다 것은보기 웹 페이지에 완료,하지만 여전히 무료입니다.
• 메타 : (예 : 오디오의 총 지속 시간으로) 몇 가지 기본 정보로 충분 오디오 파일의 시작 부분에 데이터 블록을 얻을 수있는 브라우저를 말할 결정
• 아무도 : ** 미리 다운로드 할 필요없이 브라우저를 알려줍니다. 제대로이 값을 사용하면, 대역폭을 절약 할 수 있습니다.

당신이 프리로드 속성을 설정하지 않은 경우, 브라우저는 다운로드 한 사전 여부를 결정합니다. 이 시점에, 치료는 다른 브라우저에서 동일하지 않습니다. 대부분의 브라우저 기본값으로 자동하지만, 파이어 폭스는 메타 데이터의 기본값입니다. 이 프리로드 속성 규칙을 엄격하게 적용해야 아니라고하지만 참고하시기 바랍니다,하지만 브라우저에서만 당신의 의견. 상황에 따라, 당신은 당신의 브라우저 설정을 무시할 수 있습니다. (일부 이전 버전의 브라우저는 프리로드 특성에 따라 상관하지 않습니다.)

3. 공통 이벤트

이벤트 이름 : 설명
oncanplay : 스크립트 파일이 준비되면 당신은 (버퍼가 충분의 시작 부분에) 실행 재생을 시작할 수 있습니다.
ontimeupdate : 때 재생 위치 변경 (예 때 사용자 다른 위치로 빠르게 매체)의 스크립트.
onended : 미디어 끝에 도달 한 스크립트가 실행이되면 (같이 보낼 수있는 메시지와 같은 "를 시청 해 주셔서 감사합니다").

4. 일반적인 방법

방법 이름 :의 설명
플레이 () : 오디오 / 비디오 재생을 시작
PAUSE를 () : 일시 정지 현재 오디오를 재생 / 비디오

공통의 API 속성

속성 이름 : 사전
DURATION : 반환 (초) 현재 오디오 / 비디오 길이는
일시 정지 : 설정하거나 반환 오디오 / 비디오 일시 정지
currentTime을 : 세트 또는 반환 (초) 현재 재생 위치의 오디오 / 비디오
종료 : 오디오에 반환 / 비디오 재생이 종료된다

둘째, 자신의 플레이어를 만들

우리는 다음과 같은 기능을 달성하기 위해 자바 스크립트 제어 재생 제어 동작 (사용자 정의 재생 컨트롤)를 사용합니다 :

• 사용 HTML + CSS는 대부분의 비디오의 맨 아래로 이동 한 후 자체 플레이어 컨트롤 막대 확인하고
• 비디오 로딩 로딩 효과
• 재생, 일시 중지
• 총 현재 디스플레이의 지속 시간과 긴 플레이
• 진행 막대 재생
• 전체 화면

1. 재생 컨트롤

<figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
        <video src="./video/mv.mp4"></video>
        <div class="controls">
            <!-- 播放/暂停 -->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!-- 全屏 -->
            <a href="javascript:;" class="expand fa fa-expand"></a>
            <!-- 进度条 -->
            <div class="progress">
                <div class="loaded"></div>
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!-- 时间 -->
            <div class="timer">
                <span class="current">00:00:00</span> /
                <span class="total">00:00:00</span>
            </div>
            <!-- 声音 -->
        </div>
    </div>
</figure>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

위의 내용 인 HTML 코드, .controls 클래스는 재생 컨트롤의 HTML, CSS 코드를 참조 모든 :

<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/player.css">

재생 버튼을 표시하기 위해 그리고 그래서 나는 사용 된 글꼴 아이콘 아이콘

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 요소를 사용하는 모든하자 GET의 자바 스크립트 코드를 작성하기 시작하자 :

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;
    }
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

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. 전체 화면

이 기능은 글로벌 API의 HTML5를 사용하여 제공 할 수 있습니다, 비디오와는 아무 달성하지 webkitRequestFullScreen :

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