文章目录
- <embed>标签
- <object> 标签
- <video>标签
- <video>浏览器支持
- 视频格式与浏览器的支持
- DOM元素提供的方法、属性和事件
- 兼容多版本的浏览器
- 自定义控制栏
<embed>标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提:浏览器支持 Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。
<embed src="movie.swf" height="200" width="200"/>
HTML 代码显示嵌入网页的 Flash 视频。
<object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提:浏览器支持Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。
<object data="movie.swf" height="200" width="200"/>
HTML 片段显示嵌入网页的一段 Flash 视频:
<video>标签
<video> 是 HTML 5 中的新标签。<video> 标签的作用是在 HTML 页面中嵌入视频元素。
问题:
- <video> 元素在老式浏览器中无效。
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视频</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 和 |
<track> | 定义在媒体播放器文本轨迹 |
<video>浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素。
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
视频格式与浏览器的支持
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (从 Opera 25 起) | YES | YES |
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
DOM元素提供的方法、属性和事件
方法 | 描述 |
---|---|
addTextTrack() | 向音频/视频添加新的文本轨道。 |
canPlayType() | 检测浏览器是否能播放指定的音频/视频类型。 |
load() | 重新加载音频/视频元素。 |
play() | 开始播放音频/视频。 |
pause() | pause() |
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在加载完成后随即播放音频/视频。 |
buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回音频/视频是否显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回音频/视频的 CORS 设置。 |
currentSrc | 返回当前音频/视频的 URL。 |
currentTime | 设置或返回音频/视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回音频/视频默认是否静音。 |
defaultPlaybackRate | 设置或返回音频/视频的默认播放速度。 |
duration | 返回当前音频/视频的长度(以秒计)。 |
ended | 返回表示音频/视频错误状态的 MediaError 对象。 |
loop | 设置或返回音频/视频是否应在结束时重新播放。 |
mediaGroup | 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)。 |
muted | 设置或返回音频/视频是否静音。 |
networkState | 返回音频/视频的当前网络状态。 |
paused | 设置或返回音频/视频是否暂停。 |
playbackRate | 设置或返回音频/视频播放的速度。 |
played | 返回表示音频/视频已播放部分的 TimeRanges 对象。 |
preload | 设置或返回音频/视频是否应该在页面加载后进行加载。 |
readyState | 返回音频/视频当前的就绪状态。 |
seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户是否正在音频/视频中进行查找。 |
src | 设置或返回音频/视频元素的当前来源。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回音频/视频的音量。 |
事件 | 描述 |
---|---|
abort | 当音频/视频的加载已放弃时触发。 |
canplay | 当浏览器可以开始播放音频/视频时触发。 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
durationchange | 当音频/视频的时长已更改时触发。 |
emptied | 当目前的播放列表为空时触发。 |
ended | 当目前的播放列表已结束时触发。 |
error | 当在音频/视频加载期间发生错误时触发。 |
loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
loadstart | 当浏览器开始查找音频/视频时触发。 |
pause | 当音频/视频已暂停时触发。 |
play | 当音频/视频已开始或不再暂停时触发。 |
playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
progress | 当浏览器正在下载音频/视频时触发。 |
ratechange | 当音频/视频的播放速度已更改时触发。 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时触发。 |
suspend | 当浏览器刻意不获取媒体数据时触发。 |
timeupdate | 当目前的播放位置已更改时触发。 |
volumechange | 当音量已更改时触发。 |
waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
兼容多版本的浏览器
使用source元素来定义一个以上的媒体元素,一个video元素中可以包含任意数量的source元素,浏览器会加载第一个它支持的source元素引用的文件格式,并忽略其他的来源,无法播放HTML5视频的浏览器则会显示你提供的消息中的备用链接
<video controls="controls">
<source src="my-video.mp4" type="video/mp4" />
<source src="my-video.webm" type="video/webm" />
为旧浏览器输入备用链接或备用文本信息
</video>
自定义控制栏
video播放相关的API:
video.duration:整个媒体文件的播放时长,单位s
video.paused :如果媒体文件被暂停,则返回true;如果还没开始播放,默认返回true
video.ended :如果媒体文件播放完毕,则返回true
video.currentTime:以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
video.volume :在0.0到1.0之间设置音频音量的相对值,或者查询当前音量相对值
video.muted :检测当前是否为静音,是则为true;为文件设置静音或消除静音
video.play() :播放视频文件
video.pause() :暂停处于播放状态的视频文件
video.canPlayType() :测试video元素是否支持给定MIME类型的文件
监听事件:
ontimeupdate :当video.currentTime发生改变时触发该事件
全屏控制API:
video.webkitRequestFullScreen():全屏显示
document.webkitCancelFullScreen():退出全屏
document.webkitIsFullScreen:如果当前处于全屏状态,则返回true,否则返回false
document.addEventListener(‘webkitfullscreenchange’, handler):当在全屏和非全屏状态切换时,触发该事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<progress value="50" max="100"></progress>
<input type="number">
<video src="./videos.mp4" controls></video>
<div class="btns">
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>快倍速</button>
<button>慢倍速</button>
</div>
<div class="play">
<button id="play">播放</button>
<button id="progress">获得播放百分比</button>
</div>
<div class="showprogress"></div>
<script>
//1.获取视频
var video=document.getElementsByTagName('video')[0];
//2.获取音频
var btns=document.getElementsByClassName('btns')[0];
console.log(btns);
//3.判断按钮的文本内容、绑定事件
btns.onclick=function(){
//4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
var text=event.target.innerText;
if(text == '播放'){
// console.log(video.volume); // 视频的音量
// console.log(video.duration); //视频的总长度
// console.log(video.cuttertTime); //视频当前播放的时长
// console.log(video.paused); //视频当前播放状态 true为暂停
video.play()
}
if(text == '暂停'){
video.pause()
}
if(text == '快进'){
video.currentTime +=10
video.play()
}
if(text == '快退'){
video.currentTime -=10
video.play()
}
if(text == '快倍速'){
console.log(video.playbackRate);
video.playbackRate *= 1.8
video.play()
}
if(text == '慢倍速'){
video.playbackRate *= 0.5
video.play()
}
}
//需求:2. 同一个按钮实现暂停播放
var play_btn = document.getElementById('play')
play_btn.onclick = function(){
if(video.paused){ //判断视频播放状态 true为暂停
video.play()
play_btn.innerText = '暂停'
}else{
video.pause()
play_btn.innerText = '播放'
}
}
// 需求:3.获得播放的百分比
var progress = document.getElementById('progress')
progress.onclick= function(){
var total = video.duration
var current = video.currentTime
var res = (current/total*100).toFixed(2) +'%'
console.log(res);
//将百分比存入div
var showprogress = document.getElementsByClassName('showprogress')[0]
showprogress.innerText = res
}
</script>
</body>
</html>