<video> 标签定义视频,比如电影片段或其他视频流。<video> 标签是 HTML 5 的新标签。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。Internet Explorer 8 以及更早的版本不支持 <video> 标签

<audio> 标签定义声音,比如音乐或其他音频流。<audio> 标签是 HTML 5 的新标签 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。Internet Explorer 8 以及更早的版本不支持 <audio> 标签

video 标签的属性介绍

  • src 要播放的视频的 URL
  • poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 是一个 URL
  • width 设置视频播放器的宽度
  • height 设置视频播放器的高度
  • controls 如果出现该属性,则向用户显示控件,比如播放按钮 可以写 controls 也可以 controls = "controls"。 推荐不写属性值
  • autoplay 如果出现该属性,则视频在就绪后马上播放。可以写 autoplay 也可以 autoplay = "autoplay"。 推荐不写属性值
  • muted 规定视频的音频输出应该被静音 可以写 muted 也可以 muted = "muted"。 推荐不写属性值
  • loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
  • <video>你的浏览器不支持</video> 标签对中间的东西,在支持 video 标签的浏览器中是不会显示的,在 IE8 及以下版本将显示中间的文本
  • 若考虑兼容 PC 端 IE8 及以下,可以在 video 标签对里面嵌入 object 标签 或者 flash 标签。当然在手机端是都支持 video 标签的
  • video 在各种浏览器上支持的 视频 格式是不同的,有版权的原因 IE 支持 wmv 和 mp4,chrome 支持 webq 和 mp4,firefox 支持 ogv 和 mp4。可以看出 video 支持的通用格式是 mp4

audio 标签属性介绍

  • src 要播放的音频的 URL
  • autoplay 如果出现该属性,则音频在就绪后马上播放。可以写 autoplay 也可以 autoplay = "autoplay"。 推荐不写属性值
  • controls 如果出现该属性,则向用户显示控件,比如播放按钮 可以写 controls 也可以 controls = "controls"。 推荐不写属性值
  • loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
  • muted 规定音频输出应该被静音 可以写 muted 也可以 muted = "muted"。 推荐不写属性值
  • 格式:mp3

自定义播放器的控件(开始、暂停、停止)

  • vedio.play(); //开始播放视频
  • vedio.pause(); //暂停视频播放
  • vedio.pause();vedio.currentTime = 0;//停止视频播放( 通过暂停视频,再将视频当前播放时间调至 0 秒 )
  • 自定义播放进度条( 通过 currentTime 和 duration 算出当前播放的百分比,在动态改变一个盒子的宽度)

完整示例演示代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
input{width:50px;height:25px;line-height:25px;background-color: magenta;}
#percent{height:20px;background-color: #ccc;width:800px;}
#child{width:0;height:20px;background-color: lime;}
</style>
</head>
<body>
<video id="v1" src="json.mp4" width="800px;"></video>
<input type="button" id="but1" value="播放" />
<input type="button" id="but2" value="暂停" />
<input type="button" id="but3" value="停止" />
<input type="button" id="but4" value="显示" />
<div id="percent">
<div id="child"></div>
</div>
<script>
let v1 = document.getElementById('v1');
let btn1 = document.getElementById('but1');//播放按钮
let btn2 = document.getElementById('but2');//暂停按钮
let btn3 = document.getElementById('but3');//停止按钮
let btn4 = document.getElementById('but4');//显示当前视频播放的进度 百分比
let child = document.getElementById('child');
btn1.onclick = function() {
v1.play();//播放视频
};
btn2.onclick = function () {
v1.pause();//暂停视频播放
};
btn3.onclick = function () {
v1.pause();//停止视频播放(通过暂停视频,再将视频当前播放时间调至0秒)
v1.currentTime = 0;
};
btn4.onclick = function() {
console.log(`${v1.currentTime} -- ${v1.duration} -- ` + 100*v1.currentTime/v1.duration+`%`);
};

//播放时间变化 回调函数
v1.addEventListener('timeupdate',function() {
console.log(`${v1.currentTime} -- ${v1.duration} -- ` + 100*v1.currentTime/v1.duration+`%`);
child.style.width = 100*v1.currentTime/v1.duration + '%';
},false);
//播放速度怎么做?
//网页端一般不能设置,如果要改为1:1.1 或者 1:1.5 等播放速度
//方案一: 服务器调整,存为多个视频文件,需要服务端在视频压制时制作为这么几个版本,想播放哪个版本的就选取哪个版本,
//方案二: 或者在视频点播的时候,调整码率--会占用服务器资源 ,有时并不划算
//快进怎么做??
//currentTime++
//试看 试听5分钟 怎么做?
//是不能用客服端来做的,用户可以很轻松的跳过js的限制,需要在服务器端生成两段视频,一段5分钟,一段是后面的部分,对于没有登录的用户只给前一段视频
//Node.js就可以将视频切成两段
//如何宽高适配 不变形,?
//若视频的宽高比>容器宽高比 则让宽度 === 容器宽 高 等比变化
//若视频的宽高比<容器宽高比 则让高度 === 容器高 宽 等比变化
//如何干掉controls 视频下载功能?
//通过视频点播 的流视频功能 这样客户端是没有完整的视频的,自然就不能下载了
</script>
</body>
</html>