前端笔记—从入门到坟墓[HTML5][视频与音频引入][14]

插入视频方式

1，利用优酷，腾讯视频，b站等各大视频网站平台，上传自己的视频。然后点击分享，复制带有iframe的标签粘贴的程序内，可实现视频插入。

优点：减轻服务器负担，缺点：有广告用户体验不佳。

2，第二个方法利用video标签。

audio与video标签的属性

autoplay如果出现该属性，则视频在就绪后马上播放。
controls如果出现该属性，则向用户显示控件，比如播放按钮。
height设置视频播放器的高度。
loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted如果出现该属性，视频的音频输出为静音
poster规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay则忽略该属性，属性值：auto同时加载，metadata页面加载完再加载视频，none不加载。（该属性ie兼容性不是很好，可用于移动端）

<video src="movie.ogg" controls="controls" loop="loop" autoplay="autoplay"></video>

audio标签使用

<audio> 标签定义声音，比如音乐或其他音频流。

注：为<audio>标签做兼容，这样拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件。

<audio>
	<source src="./a.mp3" />
	<source src="./a.ogg" />
	浏览器版本太低，请升级
</audio>

<source>标签为媒介元素（比如<video>和<audio>）定义媒介资源。
<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

video标签使用

<video>标签定义视频，比如电影片段或其他视频流。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

---

案例：简单实现一个视频功能

该程序自定义视频组件，可以实现不同浏览器统一样式。

此程序的下载地址

---

为播放器添加全屏按钮

点击按钮切换为全屏状态

buttonEle.onEle("click",function () {
    if (videoEle.requestFullscreen) {//使视频改为全屏显示
        videoEle.requestFullscreen();
    }
//FireFox
    else if (videoEle.mozRequestFullScreen) {
        videoEle.mozRequestFullScreen();
    }
//Chrome等
    else if (videoEle.webkitRequestFullScreen) {
        videoEle.webkitRequestFullScreen();
    }
//IE11
    else if (videoEle.msRequestFullscreen) {
        videoEle.msRequestFullscreen();
    }
})

点击按钮取消全屏状态

兼容代码同上只是方法换一下

buttonEle.onEle("click",function () {
        videoEle.webkitCancelFullscreen();
    }

添加加载视频时动画

在video标签的父级标签添加css样式：

video{
    /*先隐藏视频，加载完后显示*/
    display: none;
}
player{
	background：#000 url(img/bg.gif) ;
}

videoEle.oncanplay=function () {
    //视频加载到可以播放了
    this.style.display = "block";
    var timeStr = formatTime(videoEle.duration);//总时长
    totalEle.innerHTML = timeStr;//载入总时长
}

当视频加载不出来时显示gif格式的加载图片，加载出来后显示视频组件，背景图片也就被覆盖了。

常用api

videoEle.oncanplay = function(){……}

监听视频是否记载完成，加载完触发该事件。

videoEle.ontimeupdate = function(){……}

当前的播放位置发送改变时触发

videoEle.onended = function(){……}

视频结束时触发

---

videoEle.play()

视频播放

videoEle.pause()

视频暂停

---

videoEle.currentTime = 5;//设为将时间位置设置为 5 秒：

属性设置或返回音频/视频播放的当前位置（以秒计）。

console.log(videoEle.duration);

获得当前视频的长度