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.

If the preload attribute is not set, the browser will decide whether to pre-download it. Different browsers handle this differently. Most browsers use auto as the default, but Firefox's default is metadata. However, please also note that this preload attribute is not a rule that must be strictly implemented, but is just a suggestion for the browser. Depending on the circumstances, the browser may ignore your settings. (Some older browsers will not care about the preload attribute.)

　3. Common events

Event name: Explanation

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

Method name: Explanation

play(): Start playing audio/video

　

pause()：Pause the currently playing audio/video

　5. Commonly used API attributes

　Attribute name: Explanation

　

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

For more attributes, events, and methods, please view w3school

2. Create your own player

We use JavaScript to control playback The behavior of the control (customized playback control) implements the following functions:

• 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

    
视频播放器figcaption>    

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

            
            a>            
            a>            
            

                
p>                
p>                
p>            p>            
            

                00:00:00span> /                00:00:00span>            p>            
        p>    p>figure>

The above is all HTML code, the .controls class is the playback control HTML, citing the CSS code:

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

In order to display the play button and other icons, I used the font icon

2. Video loading loading effect

Hide the video at the beginning, replace it with a background image, and then display the video when the video is loaded and ready to be played

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. Play Function

Let’s start writing javascript code. First we get the DOM elements to be used:

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

When the video can be played, display the video

//当视频可播放的时候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内核的。

The above is the detailed content of HTML5 VideoAPI, build your own Web video player. For more information, please follow other related articles on the PHP Chinese website!