- <embed>标签:使用此标签可以直接插入视频文件(直接将视频塞入页面),它的本质上是调用本机上已经安装的软件,但是这种方式对于视频本身来说存在不可控,并且兼容性的问题也无法顾及。
- 采用flash插件:首先需要安装flash,存在两个问题:1.学习flash增加成本;2.苹果设备不支持flash。
所以说在此之后的html5中新增了一些多媒体标签
- <audio>音频标签,定义声音,比如音乐或其他音频流。
参数:src:文件路径;controls:音频播放器的控制面板;autoplay:自动播放;loop:循环
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
支持<audio>标签浏览器 | 不支持 <audio>标签浏览器 |
---|---|
Internet Explorer 9+ | Internet Explorer 8 以及更早的版本不支持 <audio>标签 |
Firefox | |
Opera | |
Chrome | |
Safari |
<audio src="./images/song.mp3" controls>
Your borwser does not support the audio tag.
</audio>
- <video>标签定义视频,比如电影片段或其他视频流。
参数:src:文件路径;controls:音频播放器的控制面板;autoplay:自动播放;loop:循环播放;width:宽度;height:高度;poster:当视频还没有完全下载,或者用户还没有点击播放前的默认显示封面。默认显示当前视频文件第一帧画面。
注意事项:当设置宽高的时候,一般情况下只设置宽度或者高度,让其自动等比缩放。如果同时设置宽度和高度,那么视频并不会真正的调整到设置的宽高,除非设置值刚好是等比例的。且不同浏览器所支持的视频格式是不一样的 。
支持<video>标签浏览器 | 不支持 <video>标签浏览器 |
---|---|
Internet Explorer 9+ | Internet Explorer 8 以及更早的版本不支持 <video>标签 |
Firefox | |
Opera | |
Chrome | |
Safari |
<video src="../movie.ogv" width="320" height="240" controls='controls'>
Your borwser does not support the video tag.
</video>
解决浏览器所支持的视频格式是不一样的方法:采用source标签
- <source>标签可以连接不同的视频文件。浏览器将会使用第一个可识别格式。
<video width="320" height="240" controls="controls">
<source src="../movie.ogv">
<source src="../movie.mp4">
You borwser does not support the video tag.
</video>
- video常用DOM操作
play():开始播放视频。
pause():暂停当前播放的视频。
playbackRate:改变播放速度。 - video案例 完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video属性Dom控制</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="text-align: center;">
<video src="./images/mov_bbb.mp4" preload="metadata" controls></video>
<!-- 点击调用播放暂停方法 -->
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">改变大</button>
<button onclick="makeSmall()">改变小</button>
<button onclick="playBack()">改变播放速度</button>
</div>
<script>
//获取元素
var myVideo = document.getElementsByTagName('video')[0]
//播放暂停方法
function playPause(){
//如果视频此时的状态是暂停状态,则点击时调用播放方法;否则调用暂停方法
if(myVideo.paused){
myVideo.play()
}else{
myVideo.pause()
}
}
//增大宽度
function makeBig(){
myVideo.width = 560;
}
//减小宽度
function makeSmall(){
myVideo.width = 320;
}
//改变播放速度
function playBack(){
var speed = 2;
myVideo.playbackRate = speed;
}
</script>
</body>
</html>
结束微语:掩埋了泪眼的斑驳,在转角之后扣上故事门锁