HTML5 VideoAPI, build your own Web video player

1. Basic knowledge

## 1. Usage

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

Note: The audio and video elements must contain both start and end tags, and cannot be used

　2. Important HTML attributes

Controls: ontrol: If this attribute appears, controls are displayed to the user, such as a play button. The playback controls in each browser are different, but the purpose is the same. You can control the start and end, jump to a new position and adjust the volume

Autoplay: autoplay: If it appears With this attribute, the video will be played as soon as it is ready. If the autoplay attribute is not set, the audio file must be played when the user clicks the play button.

loop：loop: (loop playback) tells the browser to start playing again from the beginning when the audio reaches the end

preload：auto, mete, none: Tell the browser how to download the audio

• auto: Tell the browser to download the entire file so that it can be played when the user clicks the play button. Of course, the download process occurs in the background, so web page visitors don't have to wait for the download to complete and can still view the web page as they wish.

• meta: Tell the browser to get the data block at the beginning of the audio file first, which is enough to determine some basic information (such as the total duration of the audio)

• none: ** Tells the browser not to download it beforehand. Using these values ​​appropriately can save bandwidth.

　3. Common events

oncanplay : Script to run when the file is ready to start playing (when buffering is sufficient to start).

　ontimeupdate: A script that runs when the playback position changes (such as when the user fast-forwards to a different position in the media).

onended: A script that runs when the media has reached the end (can send a message like "Thanks for watching").

4. Commonly used methods

play(): Start playing audio/video

pause()：Pause the currently playing audio/video

　5. Commonly used API attributes

duration: Returns the length of the current audio/video (in seconds)

paused: Sets or returns whether the audio/video is paused

currentTime: Set or return the current playback position in the audio/video (in seconds)

ended: Return whether the playback of the audio/video has ended

2. Create your own player

• Use HTML+CSS to create your own playback control bar, and then position it at the bottom of the video

• Video loading loading effect

• ##Play, pause

• Total duration and current playback duration display

• Playback progress bar

• Full screen display

##　1.
Playback controls

<link rel="stylesheet" href="./css/font-awesome.css"><link rel="stylesheet" href="./css/player.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;

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

//播放按钮控制isPlay.onclick = function(){        if(video.paused) {
            video.play();
        } else {
            video.pause();
        }        this.classList.toggle("fa-pause");
};

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

//播放进度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;
};

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