一、视频
1、Video标签的各属性说明
Autoplay 视频就绪自动播放 在火狐和谷歌浏览器中需要加上 muted 属性一起使用才可以
controls 向用户显示播放控件
Width 设置播放器宽度
Height 设置播放器高度
Loop 播放完是否继续播放该视频,循环播放
Preload 是否等加载完再播放
Src 视频url地址
Poster 加载等待的画面图片
Autobuffer 设置为浏览器缓冲方式,不设置autoply才有效
效果如下:
1、Autoplay 视频就绪自动播放 在火狐和谷歌浏览器中需要加上 muted 属性一起使用才可以
<video src="潭州教育.mp4" Autoplay muted controls poster="1.jpg" width="500" height="500">
您的浏览器不支持video标签,请您更换浏览器!
</video>
2、controls 向用户显示播放控件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190908144221516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzczNDE2,size_16,color_FFFFFF,t_70)
3、Poster 加载等待的画面图片‘
<video src="潭州教育.mp4" controls poster="1.jpg" width="500" height="500">
您的浏览器不支持video标签,请您更换浏览器!
</video>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190908144351957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzczNDE2,size_16,color_FFFFFF,t_70)
2、Video API方法
play() 播放
pause() 暂停
load() 重新加载
全屏: webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen();
退出全屏:
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
全屏的案例
oBox.onclick = function(){
vid.webkitRequestFullScreen();
}
播放暂停的案例
<video poster="1.jpg" width="500" height="500" id="vid">
<source src="1.mp4" type="video/mp4"></source>
<source src="1.ogg" type="video/mp4"></source>
</video>
<input type="button" value="播放" id="btn1">
var vid = document.getElementById('vid');
var btn1 = document.getElementById('btn1')
var mark =true;
btn1.onclick = function(){
if ( mark){
btn1.value = "暂停";
mark =false;
vid.play();
} else
{
btn1.value = "播放";
mark='true';
vid.pause();
}
}
2、下一集 按钮的案例
var vid = document.getElementById("vid");
var btn1 = document.getElementById("btn1");
var sou = document.getElementsByTagName("source");
btn1.onclick = function(){
sou[0].src = "1.mp4";
sou[1].src = "1.ogg";
sou[1].src = "1.wmv";
vid.load(); //改变地址后,值用重新加载这个方法就可以了
}
3、
Video API属性
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 false /true
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候,返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
下面以一个制作一个视频播放器为案例,
1、来展现出播放器中时间的改变
<video src="1.mp4" Autoplay muted poster="1.jpg" width="500" height="500" id="vid">
您的浏览器不支持video标签,请您更换浏览器!
</video></br>
<input type="button" value="播放">
<input type="button" value="00:00:00" width="70px"> //这里是展现时间的改变
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
<input type="button" value="00:00:00"> //这里是展示总的时长
function nowTime(){ //获取当前时间 并在input里显示
input[1].value = time(vid.currentTime); //这里用到了属性 currentTime 表示当前时间
}
function time(cTime){ //这里是把获取到的数据进行处理
cTime = parseInt(cTime);
var h = zero(Math.floor(cTime/3600));
var m = zero(Math.floor(cTime%3600/60));
var s = zero(Math.floor(cTime%60));
return h+":"+m+":"+s;
}
function zero(num){
if (num<10)
{
return "0"+num;
}else{
return ""+num;
}
}
2、实现进度条拖拽,进度条的实现是创一个大盒子,进度条外面的框就是大盒子,大盒子里面有两个小盒子,分别是拖拽点和拖拽过程后,经过部分的进度条 ,三个盒子
div3.onmousedown = function(ev){
var ev = ev || window.event;
//这里定下的x是 鼠标的位置减去 拖拽点离它的父级的距离 这里减去这个距离的原因 ,是比如拖拽点在进度条中间的时候,鼠标距离浏览器的位置减去进度条一半的距离 结果就是左边进度条距离浏览器的距离 ,然后看下面
var x = ev.clientX - div3.offsetLeft;
document.onmousemove = function(ev){
var ev = ev || window.event;
var _left = ev.clientX - x; //拖拽过程中,拖拽点减去进度条距离浏览器的距离 就是拖拽的距离
if (_left<0)
{
_left = 0;
}else if (_left>div1.offsetWidth - div3.offsetWidth )
{
_left = div1.offsetWidth - div3.offsetWidth;
}
div3.style.left = _left+"px" ;
div2.style.width = (_left+20) +"px";
}
3、拖拽进度条实现时间改变,与时间改变实现进度条跟着变
function nowTime(){ //获取当前时间 并在input里显示
input[1].value = time(vid.currentTime);
var n = vid.currentTime/vid.duration; //获取当前时间占总时间的比例
div3.style.left = n*(div1.offsetWidth - div3.offsetWidth)+"px"; 这个比例乘以总长度 再赋给现在的位置
div2.style.width = (20+n*(div1.offsetWidth - div3.offsetWidth))+"px";
}
function time(cTime){
cTime = parseInt(cTime);
var h = zero(Math.floor(cTime/3600));
var m = zero(Math.floor(cTime%3600/60));
var s = zero(Math.floor(cTime%60));
return h+":"+m+":"+s;
}
function zero(num){
if (num<10)
{
return "0"+num;
}else{
return " "+num;
}
}
//播放进度条
div3.onmousedown = function(ev){
var ev = ev || window.event;
var x = ev.clientX - div3.offsetLeft;
document.onmousemove = function(ev){
var ev = ev || window.event;
var _left = ev.clientX - x;
if (_left<0)
{
_left = 0;
}else if (_left>div1.offsetWidth - div3.offsetWidth )
{
_left = div1.offsetWidth - div3.offsetWidth;
}
div3.style.left = _left+"px";
div2.style.width = (_left+20) +"px";
var n = _left/(div1.offsetWidth - div3.offsetWidth); //这里获取到现在进度条所在的长度与总长度的比例
//console.log(n);
vid.currentTime = n*vid.duration; //这个比例*总时间 在赋给当前时间
nowTime(); //在重新获取现在时间
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
二、音频
用法和视频一样
audio 属性
autoplay 自动播放
controls 向用户显示播放控件
loop 循环
preload 是否等加载完再播放
src 要播放的音频的 URL。