html 4 中的语法
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素
<object data="1.swf" width="400"></object>
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素
<embed src="1.swf" width="400">
缺点
需要flash,效率低
部分浏览器不支持 Flash
iPad 和 iPhone 安卓4.4 都不支持flash
html5 中的语法
<video width=" " height="" src=""> </video>
videosource元素
video中可以包含source元素,用于提供多种格式的文件,供浏览器选择。
可以链接不同的视频文件,浏览器将使用第一个可识别的格式
例子:
<video id="vid" width="400" height="400" src="1.mp4" controls loop poster="1.jpg">
<source src="1.mp4" type="video/mp4"></source>
<source src="1.ogg" type="video/ogg"></source>
<a href="#">您的浏览器不支持视频播放。</a>
</video>
视频 video 常用属性
常用属性
controls 属性: 在视频元素的底部展示一个元素自带的控制条工具。
autoplay 属性: 一旦视频就绪马上开始自动播放。
preload 属性: 是否在页面加载后载入视频 ( 预加载 ) 如有autoplay属性则进行忽略
preload 可选值:
auto (默认) : 当页面加载后载入整个视频
metadata : 只加载播放文件的基本信息(如:尺寸、持续时间、第一帧信息、曲目列表等)
none : 当页面加载后不载入视频
loop 属性: 视频结束后将重新开始播放。
muted 属性:如果出现该属性,则输出为静音。
poster 属性:将在视频文件播放前显示图片(广告图片)。
video 状态
duration 整个媒体文件的播放时长,以s为单位
currentTime 当前播放时间,以s为单位
paused 如果媒体文件当前被暂停,则返回true
例子:
start.onclick=function(){
//判断播放器的paused状态 去决定是播放还是暂停
if(vid.paused){
vid.play()
}else{
vid.pause()
}
}
video 方法
load ( ) 方法 : 用于重新加载src指定的媒体文件。
pause ( ) 方法 : 用于暂停正在播放中的媒体文件。
play ( ) 方法 : 用于播放媒体文件。
video 事件
error--------------请求数据时遇到错误时触发
play---------------开始播放时触发
pause-------------暂停时触发
timeupdate-------播放时间改变时触发
ended-------------播放结束时触发
volumechange----音量改变时触发
提示
可以使用addEventListener 方法来对事件发生进行监听。
在js中使用onerror的写法,前面加一个on,jquery无需on
例子:
vid.onerror=function(){
alert("请求数据错误")
}
音频 audio 常用属性
<audio src="" controls> </audio>
src:音乐的URL
controls:浏览器自带的控制条
注意:
document.addEventListener("touchstart",function(){
au.play();
},false)
安卓和ios都不支持偷跑流量,多媒体元素播放,必须用touchstart (接触操作)触发
所以是没有办法自动播放的。
网友评论