HTML 5 多媒体
在HTML4.01时候想插入音频,视频,必须借助flash,
1. 视频音频了解
1.1. 主流的视频文件格式
- MPEG-4: 通常以.mp4为扩展名
- Flash视频: 通常以.flv为扩展名
- Ogg: 通常以.ogv为扩展名
- WebM: 通常以.webm为扩展名
- 音频视频交错: 通常以.avi为扩展名
1.2 音频格式：
- Ogg .ogg
- MP3 .mp3
- ACC .acc
1.3 编码器
音频和视频编码/解码是一种算法, 用来对于一段特定的视频或音频进行解码和编码,以便音频和视频能够播放,原始的媒体文件体积非常巨大,如果不对其进行编码,那么数据量是非常惊人的,在互联网上传播则要耗费的时间是无法忍受的, 如果不对其进行解码,就无法将编码后的数据重组为原始的媒体资源
1. 视频编解码器
- H.264
- VP8 (google开源)
- Ogg Theora
2. 音频编解码器
- AAC
- MPEG-3
- Ogg Vorbis
H.264: 别名MPEG-4, 由MPEG研发并于2003年标准化,
当然也有一些编解码器是受专利了保护的, 有一些这是免费的, 例如Ogg的Vorbis音频编解码器,Ogg的Theora视频编码器也是可以免费试用的, 而想使用H.264的话就需要支付相关费用了
2. 视频音频基本使用
2.1 基本使用标签
HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。
HTML <audio> 元素用于在文档中嵌入音频内容。
// 视频
<video src="视频地址" controls></video>
// 音频
<audio src="视频地址" controls></video>
<!-- 视频有默认的宽高300*150，没有控件controls视频还无法播放，只能看到画面 -->
<video src="./video/这一路.mp4" controls></video>
<!-- 音频加上控件controls才能播放 -->
<audio src="./video/zyl大欢.mp3" controls></audio>
2.2. 兼容处理
标签的兼容
<video src="./video/这一路.mp4" controls>当前浏览器不支持video，请更新浏览器或使用chrome打开</video>
由于浏览器视频格式的编辑码器不一样,导致有兼容问题,这个时候W3C为了解决这个问题,
兼容处理使用source标签
视频格式的兼容
<video>
<!-- 罗列视频格式-->
<source src="./dy.mp4" type="video/mp4">
<source src="./dy.ogg" type="video/ogg">
你的浏览器不支持video标签,<a href="./dy.map4">点击下载视频</a>
</video>
<!-- 视频格式的兼容 -->
<video width="600" height="300" controls>
<source src="./video/这一路.ogv" type="video/ogg">
<source src="./video/这一路.mp4" type="video/mp4">
</video>
音频兼容
<audio>
<source src="./dy.mp3" type="audio/mp4">
<source src="./dy.ogg" type="audio/ogg">
你的浏览器不支持audio标签,<a href="./dy.map3">点击下载音频</a>
</audio>
3. Video 视频标签
3.1 Video 标签属性
- src 视频url地址
- . width 设置播放器宽度
- . height 设置播放器高度
- .controls 向用户显示播放控件。controls是布尔值，有值就是true，即使controls="false",字符串"false"转成布尔值也是true。没有controls这个属性才是false
- autoplay 视频就绪自动播放。
- muted 视频静音
- loop 播放完是否继续播放该视频，循环播放
- poster 加载等待的画面图片
- preload 是否需要预加载
- autobuffer 设置为浏览器缓冲方式，不设置autoplay才有效
<video
width="1000"
height="300"
src="./dy.mp4"
controls
Preload
Poster='../1.jpg'
> 你的浏览器不支持 H5 Video 标签,请升级浏览器</video>
<!-- 只有无声静音的情况下，autoplay才可以起作用，之前有声音也自动播放，会被吓一跳 -->
<video width="600" height="300" src="./video/这一路.mp4" controls autoplay muted loop></video>
<!-- poster加载等待的画面图片，相当于视频的封面，也可以用gif动态图。preload视频没播放就已经加载-->
<video width="600" height="300" src="./video/这一路.mp4" controls poster="./images/222.jpg" preload></video>
3.2. Video API方法(JS操控DOM元素的方法)
play() 开始播放视频
pause() 停止播放视频
load() 重新加载媒体(比如用sourch换资源了)
-
全屏:
webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen(); //官方的 退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
<body>
<!-- 用js操控属性，js操控要有一个id或者获取元素-->
<video id="video" width="600" height="300" src="./video/这一路.mp4" controls></video>
<div> <button id="play">播放</button>
<button id="pause">暂停</button>
<button id="reload">重新加载</button>
<button id="all">全屏</button>
<button id="close">退出全屏</button>
</div>
<script>
play.onclick = function () {
video.play() //没有使用video的原生控件，自己写的按钮调用Video的API方法 播放
}
pause.onclick = function () {
video.pause() //没有使用video的原生控件，自己写的按钮调用Video的API方法 暂停
}
reload.onclick = function () {
video.src = "./video/第三套古诗韵律操.mp4"
video.load() //没有使用video的原生控件，自己写的按钮调用Video的API方法 重新加载
}
all.onclick = function () {
video.requestFullscreen() //全屏
}
close.onclick = function () {
video.exitFullscreen() //退出全屏
}
</script>
</body>
3.3. Video API属性（JS操控DOM元素的属性）
- currentTime : 开始到播放现在所用的时间(单位是秒) 可读可写
- duration : 媒体总时间(只读)
- volume : 0.0-1.0的音量相对值 可读可写
- muted : 是否静音 false /true
- paused : 媒体是否暂停(只读)
- ended : 媒体是否播放完毕(只读)
- error : 媒体发生错误的时候，返回错误代码 (只读)
- currentSrc : 以字符串的形式返回媒体地址(只读)
- poster: 视频播放前的预览图片(可读写)
- videoWidth, videoHeight: 视频实际的尺寸(只读)
btn.onclick = function () {
box.innerHTML = `
当前播放时间:${video.currentTime}<br/>
总时间:${video.duration}<br/>
音量:${video.volume}<br/>
是否静音:${video.muted}<br/>
是否暂停:${video.paused}<br/>
是否播放完毕:${video.ended}<br/>
是否发生错误:${video.error}<br/>
地址:${video.currentSrc}`;
}
<body>
<!-- 用js操控属性，js操控要有一个id或者获取元素-->
<video id="video" width="600" height="300" src="./video/这一路.mp4" controls poster="./video/hs.jpg"></video>
<div> <button id="play">播放</button>
</div>
<div id="info"></div>
<script>
// 默认控制器可能存在兼容问题，多浏览器可能不兼容、每个浏览器控件的长相也不一样，不统一，所以有时要自定义控制器，不使用默认的控件。
play.onclick = function () {
video.currentTime = 60 //video.currentTime属性的值是可读可写的
video.volume = .2 //video.volume属性的值是可读可写的
info.innerHTML = `视频播放时间：${video.currentTime}<br/>
视频总时长：${video.duration}<br/>
视频声音：${video.volume}<br/>
是否静音:${video.muted}<br/>
是否暂停:${video.paused}<br/>
是否播放完毕:${video.ended}<br/>
是否发生错误:${video.error}<br/>
地址:${video.currentSrc}<br/>
预览图:${video.poster}<br/>
视频宽:${video.videoWidth}<br/>
视频高:${video.videoHeight}`
}
</script>
</body>
3.4 . video视频基本事件
- onplay 视频播放时触发的事件
- onpause 视频暂停时触发的事件
- ontimeupdate 视频在播放时持续触发是事件
- onended 视频播放结束时触发的事件
<body>
<!-- 用js操控属性，js操控要有一个id或者获取元素-->
<video id="video" width="600" height="300" src="./video/这一路.mp4" controls></video>
<script>
video.onplay = function () {
console.log('我播放了')
}
video.onpause = function () {
console.log('我暂停了')
}
video.ontimeupdate = function () {
console.log('我一直在播放')
}
video.onended = function () {
console.log('我播放完了,你过来啦')
}
</script>
</body>
4. audio 音频标签
4.1 audio 标签属性
- src 要播放的音频的 URL。
- . autoplay 自动播放
- controls 向用户显示播放控件
- loop 循环
- preload 是否等加载完再播放
- muted 静音
4.2. audio API属性
- duration 音乐的总时间(只读)
- currentTime 音乐当前时间(可读写)
- volume: 0-1 的音量绝对值(可读写)
- ended 音乐播是否播放完毕(只读)
- play: 音乐播放(只读)
- pause:音乐暂停(只读)
- error: 媒体发生错误的时候,返回错误代码(只读)
- currentSrc: 以字符串的形式返回媒体地址(只读)_
自定义视频播放器
<body>
<div id="wrap">
<video id="video" width="500" height="300" poster="./resource/333.jpg">
<source src="./video/这一路.mp4" type="video/mp4" />
<source src="./video/这一路.ogv" type="video/ogg" />
您的浏览器不支持video标签，请您升级或更换浏览器！！
</video>
<div style="height:10px;background:-webkit-linear-gradient(top,#333,#555)"></div>
<div id="progress">
<input id="currTime" type="text" value="00:00:00">
<div class="pro">
<div class="pro-bg"></div>
<div class="pro-bar"></div>
</div>
<input id="allTime" type="text" value="00:00:00">
</div>
<div id="control">
<a id="pre" href="javascript:;"></a>
<a id="play" href="javascript:;"></a>
<a id="next" href="javascript:;"></a>
<a id="volume" href="javascript:;">
<p class="vol">
<span class="vol-bg"></span>
<span class="vol-bar"></span>
</p>
</a>
<a id="full" href="javascript:;"></a>
</div>
</div>
<script>
//获取操作的元素
//JS中没有连字符-，要么改成下划线_，要么改成驼峰
let oVide = getById('video'),
play = getById('play'),
pre = getById('pre'),
next = getById('next'),
volume = getById('volume'),
full = getById('full'),
currTime = getById('currTime'),
allTime = getById('allTime'),
pro = getByClass('pro'),
pro_bg = getByClass('pro-bg'),
pro_bar = getByClass('pro-bar'),
vol_bg = getByClass('vol-bg'),
vol_bar = getByClass('vol-bar');
//视频播放/暂停按钮
// 借助信号量控制播放暂停
let mark = true;
play.onclick = function () {
if (mark) {
console.log('播放');
oVide.play();
this.style.backgroundPosition = "-40px 0";
} else {
console.log('暂停')
oVide.pause()
this.style.backgroundPosition = "0 0"
}
mark = !mark;
// 获取视频总时长
// console.log(oVide.duration)
allTime.value = formaTime(oVide.duration)
}
//当前视频播放时间
oVide.addEventListener('timeupdate', function () {//监听timeupdate事件，触发事件处理函数
getCurrentTime()
// console.log(this.currentTime)
}, false)
//处理当前时间与进度
function getCurrentTime() {
currTime.value = formaTime(oVide.currentTime)
// 进度条
// 计算当前视频播放的比例
let decimal = oVide.currentTime / oVide.duration//播放小数比等于播放的时长除以总时长
pro_bar.style.left = decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'//小球定位定位等于播放小数比乘以容器的宽度减去小球的宽度
//进度条背景的移动
pro_bg.style.width = 20 + decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'
}
function formaTime(time) {//定义格式化时间函数formaTime() forma表示格式化。转成 时：分：秒
time = time && +time;//有可能是null或字符串，不存在就是null 字符串就转成数字类型，所以使用逻辑与
let hh = formatZero(Math.floor(time / 3600))//获得小时
let mm = formatZero(Math.floor(time % 3600 / 60))//获得分钟
let ss = formatZero(Math.floor(time % 60))//获得秒
// console.log('time',hh,mm,ss)//把这个时间渲染到页面上
return `${hh}:${mm}:${ss}`
}
//两位数字函数(时间变成两位)
function formatZero(num) {
return (num > 10 ? "" : "0") + num //得到空或者0后拼接num
}
//进度条的拖拽
pro_bar.onmousedown = function (ev) {
ev = ev || window.event;
let disX = ev.clientX - this.offsetLeft;//差值
//鼠标移动
document.onmousemove = function (ev) {
ev = ev || window.event;
let _left = ev.clientX - disX;
//边界检测
if (_left <= 0) {//最小值
_left = 0;
}
if (_left >= pro.offsetWidth - pro_bar.offsetWidth) { //最大值
_left = pro.offsetWidth - pro_bar.offsetWidth
}
//设置进度条移动
pro_bar.style.left = _left + 'px'
//设置进度条移动
pro_bg.style.width = 20 + _left + 'px';
//计算拖拽百分比小数
let processDecimal = _left / (pro.offsetWidth - pro_bar.offsetWidth) //距离除以总长
// 计算当前时间
oVide.currentTime = processDecimal * oVide.duration// 小数乘以总时长
}
getCurrentTime()//再执行处理当前时间与进度函数
//鼠标抬起
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null;
}
}
// 全屏
full.onclick = function () {
oVide.webkitRequestFullScreen()
}
//通过id获取DOM元素方法
function getById(id) {
return document.getElementById(id)
}
function getByClass(className) {
return document.getElementsByClassName(className)[0]//只要一个元素
}
</script>
</body>
