html5 api video,HTML5 VideoAPI

2.视频加载loading效果

一开始先隐藏视频，用一个背景图片替代，等到视频加载完成可以播放时在显示视频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.播放功能

让我们开始写javascript代码吧，首先我们先获取要用到的DOM元素：

var video = document.querySelector("video");

varisPlay = document.querySelector(".switch");

var expand = document.querySelector(".expand");

var progress = document.querySelector(".progress");

var loaded = document.querySelector(".progress > .loaded");

varcurrPlayTime = document.querySelector(".timer > .current");

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