前 言
现在网上有许多的框架和插件,能够满足程序猿的各种需求,慢慢的,就有些忽视最基础的东西。
比如,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
所以,今天影子向大家介绍的,就是HTML5对音视频的处理。
一、 优势 |
1 关于视频不用插件播放,点击就能看
2 跨平台、好升级、好维护,开发成本相对原生APP低很多
3 对移动的良好支持,支持手势,本地存储和视频续播等,通过H5就可以把自己的网站移动化。
4 更为简洁的代码,更好的交互
5 支持游戏开发
二、 兼容性 |
<video id="video">
<source src="movie/chenai.mp4"></source>
您的浏览器不支持 HTML5 video 标签。
</video>
注释:
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
即,如果,浏览器不支持,则会显示” 您的浏览器不支持 HTML5 video 标签。 “。
三、 两种方式 |
// 方式一
<video src="movie/chenai.mp4h"loop="loop"></video> // 方式二
<video width="320" height="240">
<source src="movie/chenai.mp4"></source>
</video>
注释:
<video> 元素元素提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
四、video标签的新增属性 |
1、controls:给视频添加播放控件。如:开始。暂停
2、autoplay:视频就绪后马上播放
3、loop:表示循环播放
4、muted:表示视屏静音输出
五、 用于操作DOM的方法和属性 |
5.1用于操作DOM的方法
1、play():表示视频播放
2、pause():表示视频暂停
5.2用于操作DOM的属性
1、paused:设置或返回音视频是否被暂停
2、autoplay:设置或返回音视频加载完之后是否立即播放
3、controls:设置或返回音视频是否添加控件
4、duration:获取音视频的总时间,单位:秒
5、currentTime:获取当前播放时间
6、defaultMuted:设置音视频是否静音输出 true — 静音 默认false,不静音
7、muted:设置或返回当前播放音视频是否是静音输出。true — 静音 false — 不是静音
8、playbackRate:设置音视频播放速度。1.0表示正常;0.5表示半速;2.0表示倍速
9、loop:设置是否循环播放。true — 循环播放 false — 不循环播放
10、volume:设置或返回音视频的音量。介于1~0之间的数
11、ended:返回音视频是否播放结束。false — 未结束 true — 已结束
六、 实例 |
6.1内代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
video{
width: 600px;
height:500px;
}
</style>
</head>
<body> <!--<video src="movie/chenai.mp4h"loop="loop"></video>-->
<video id="video">
<source src="movie/chenai.mp4"></source>
您的浏览器不支持 HTML5 video 标签。
</video> <br />
<button onclick="bofang()">点击播放/暂停</button>
<button onclick="timeAll()">点击获取总时间 </button>
<button onclick="timeBf()">点击获取当前时间 </button>
<button onclick="jingyin()">点击静音 </button>
<button onclick="yinliang()">点击获取音量 </button>
<button onclick="end()">是否播放结束 </button>
</body>
<script type="text/javascript"> var video = document.getElementById("video"); //点击播放或暂停
function bofang(){
if (video.paused) {//播放状态:是否暂停
video.play();
}else video.pause();
}
video.autoplay = true;
video.controls = false; function timeAll(){
alert(video.duration); // -- 音视频的总时间
} function timeBf(){
alert(video.currentTime);// -- 当前时间
} video.defaultMuted = false; function jingyin(){
if (video.muted == false) video.muted = true;
else video.muted = false;
} video.playbackRate = 1.0; // -- 改变播放速度
video.loop = true; // -- 是否循环播放 function yinliang(){ video.volume = 0.5;
alert(video.volume);
} function end(){
alert(video.ended);
}
</script>
</html>
6.2效果
今天,影子主要是分享的对视屏的处理,那是因为,音频的处理只是换成了audio便签而已,所以,影子就不多啰嗦了。相信大家也是理解的。