video、audio属性及事件的使用
2020-12-03 本文已影响0人
零基础的前端菜鸡
因为video和audio属性大致相同，直接合并在一起。
另外简单记录一下H5所包含的新特性。
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素(video支持MP4，WebM 和 Ogg三种格式；audio支持MP3，Ogg和Wav; 浏览器兼容上不支持 IE8及以下版本浏览器)
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
1、属性
-
controls="nodownload"不支持下载 -
controls="nofullscreen"不支持全屏 -
autoplay视频打开后自动播放 -
loop视频结束后循环播放 -
preload视频打开后进入预加载模式,不自动播放.若同时设置了autoplay属性，则该属性会被忽略 -
muted设定默认静音播放，可手动开启 -
poster贴图, 即打开视频后会在视频显示框内以此图片作为封面
-
currentSrc获取当前音视频的资源路径 -
currentTime获取当前音视频播放的时间（即当前播放到的时间位置） -
duration获取当前音视频的时间长度 -
volume获取当前音视频的音量 -
height，width获取当前音视频的宽高尺寸
- 备用地址切换（如下代码块），写入多个
source后会从第一个source进行加载，若第一个source加载失败则会自动进行切换
<video controls autoplay width="400" height="300" id="_source">
<source src="test3.mp4" type="video/mp4" />
<source src="test9.mp4" type="video/mp4" />
<source src="test-2.mp4" type="video/mp4" />
</video>
<script>
分界线表明上方内容属于标签属性，同时适用于进行标签上赋值使用及进行dom操作，中间内容适用于dom操作，下方则是代码编写的方式，具体一些使用在下方的学习所写的Demo源码中写到
2、事件
video 和 audio 的事件基本一致，其实根据以往学习的内容，其事件有点类似于一个视频的生命周期，它拥有各个不同时间点的触发事件以及出现各种情况的触发事件，通过addEventListener的方式进行监听，即可在该事件出发时做出相应的处理。详细用法我也放在下面的源码里面了，会有相应注释进行解释。
3、Demo源码
首先源码没有引用jquery，另外呢静态资源是根据自己需要可进行替换的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1>这是HEADER</h1>
</header>
<section>这是SECTION</section>
<nav>这是NAV</nav>
<article>这是ARTICLE,下面是视频组件学习</article>
<div id="videoOper">
<button type="button" onclick="selectSRC(1)">视频一</button>
<button type="button" onclick="selectSRC(2)">视频二</button>
</div>
<div id="video_demo">
<video id="video1" width="800" height="500" controls="controls" preload="auto" controlslist="nodownload nofullscreen"
style="background-color: darkblue;">
<source src="./Material/videoDemo.mp4" type="video/mp4">
Your browser does not support the video tag.
</source>
</video>
<img id="adver" src="Material/adv.png">
</div>
<div id="videoOper">
<button type="button" onclick="makeBig()">放大</button>
<button type="button" onclick="makeSmall()">缩小</button>
<button type="button" onclick="getTime()">记录时间</button>
<button type="button" onclick="getSrc()">资源路径</button>
<button type="button" onclick="makeFront()">快进5s</button>
<button type="button" onclick="makeBack()">快退5s</button>
</div>
<div id="data">
<table border="0" cellspacing="10" style="border-collapse: collapse; margin: 1rem auto;">
<tr>
<td>时间显示</td>
<td>
<input type="text" id="TIMERECORDS" value="" />
</td>
</tr>
<tr>
<td>路径显示</td>
<td>
<input type="text" id="SRCRECORDS" value="" />
</td>
</tr>
</table>
</div>
<footer>
<h1>这是FOOTER</h1>
</footer>
<script type="text/javascript">
var _self = this;
var videoDOM = document.getElementById("video1")
var imgDOM = document.getElementById("adver")
var timeDOM = document.getElementById("TIMERECORDS");
var srcDOM = document.getElementById("SRCRECORDS");
// 放大
function makeBig() {
console.log("makeBig");
let initwidth = videoDOM.width;
let initheith = videoDOM.height;
if (initwidth == 1000) {
alert("尺寸过大")
} else {
videoDOM.width = initwidth + 200;
videoDOM.height = initheith + 100;
_self.caculate();
}
}
// 缩小
function makeSmall() {
console.log("makeSmall");
let initwidth = videoDOM.width;
let initheith = videoDOM.height;
console.log(initwidth)
console.log(initheith)
if (initwidth == 400) {
alert("尺寸过小")
} else {
videoDOM.width = initwidth - 200;
videoDOM.height = initheith - 100;
_self.caculate();
}
}
// 获取当前播放时间
function getTime() {
let timeValue = videoDOM.currentTime;
timeDOM.value = timeValue + "s";
}
// 获取当前视频SRC
function getSrc() {
let srcValue = videoDOM.currentSrc;
srcDOM.value = srcValue;
}
// 快进
function makeFront() {
let timeValue = videoDOM.currentTime;
if (videoDOM.duration - timeValue < 5) {
alert("视频剩余时长不足5s")
} else {
videoDOM.currentTime = timeValue + 5;
}
}
// 快退
function makeBack() {
let timeValue = videoDOM.currentTime;
if (timeValue - 5 < 0) {
videoDOM.currentTime = 0;
} else {
videoDOM.currentTime = timeValue - 5;
}
}
// 切换视频
function selectSRC(params) {
if (params == 1) {
videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo.mp4";
} else {
videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo2.mp4";
}
}
// 计算广告图大小及位置，以保持居中
function caculate() {
let imgWidth = videoDOM.width / 2;
let imgHeight = videoDOM.height / 2;
console.log(imgWidth)
console.log(imgHeight)
imgDOM.style.width = imgWidth + "px";
imgDOM.style.height = imgHeight + "px";
imgDOM.style.top = imgHeight - imgHeight / 2 + "px";
}
// 以下是video的事件，有点类似于生命周期
// 1、loadstart: 视频查找。浏览器开始寻找指定音/视频时，即加载过程开始时
videoDOM.addEventListener('loadstart', function(e) {
console.log("视频元数据开始加载！");
console.log(e);
_self.caculate();
console.log("此时还没有视频时长--->", videoDOM.duration)
})
// 2、durationchange: 时长变化。即指定音/视频的时长数据改变，变化为音/视频的实际时长
videoDOM.addEventListener('durationchange', function(e) {
console.log("视频时长已刷新");
console.log(e);
console.log("刷新后的视频时长--->", videoDOM.duration);
// 3、loadedmetadata: 元数据已加载，
videoDOM.addEventListener('loadedmetadata')
console.log('视频的元数据已加载');
console.log(e);
})
// 4、loadeddata: 视频下载监听。当前帧的数据已加载，但是没有足够数据播放下一帧时触发
videoDOM.addEventListener('loadeddata', function(e) {
console.log("当前帧数据可用");
console.log(e);
})
// 5、progress: 浏览器下载监听。浏览器正在下载音/视频时触发
videoDOM.addEventListener('progress', function(e) {
console.log("视频正在下载中");
console.log(e);
})
// 6、canplay: 可播放监听。浏览器预计能够播放指定的音/视频时触发
videoDOM.addEventListener('canplay', function(e) {
console.log("当前视频可进行播放");
console.log(e);
})
// 7、canplaythrough: 可流畅播放。浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
videoDOM.addEventListener('canplaythrough', function(e) {
console.log("当前视频可流畅播放");
console.log(e);
})
// 8、play: 播放监听。
videoDOM.addEventListener('play', function(e) {
console.log("当前视频正在播放中");
console.log(e);
imgDOM.style.display = "none";
})
// 9、pause: 暂停监听。
videoDOM.addEventListener('pause', function(e) {
console.log("当前视频已暂停");
console.log(e);
_self.caculate();
})
// 10、seeking: 查找开始。当用户开始移动/跳跃到音/视频中新的位置时触发
videoDOM, addEventListener('seeking', function(e) {
alert("移动了进度条");
console.log(e);
})
// 11、seeked: 查找结束。当用户已经移动到新位置时触发
videoDOM.addBehavior('seeked', function(e) {
console.log("进度条移动到新位置了");
console.log(e);
})
// 12、waiting: 视频加载等待。当视频由于需要缓冲下一帧而停止、等待时触发
videoDOM.addEventListener('waiting', function(e) {
console.log("视频正在加载、等待");
console.log(e);
})
// 13、playing: 当视频因缓冲而暂停或停止后已就绪时触发
videoDOM.addEventListener('playing', function(e) {
console.log("正在进行视频缓冲");
console.log(e);
})
// 14、timeupdate: 目前播放位置已更改时，播放时间更新
videoDOM.addEventListener('timeupdate', function(e) {
console.log('播放位置变更，时间已更改');
console.log(e);
console.log("当前时间节点为", videoDOM.currentTime);
})
// 15、ended: 播放结束
videoDOM.addEventListener('ended', function(e) {
console.log("视频播放已结束");
console.log(e);
})
// 16、error: 播放错误
videoDOM.addEventListener('error', function(e) {
console.log("视频出错了");
console.log(e);
})
// 17、volumechange: 当音量变更时
videoDOM.addEventListener('volumechange', function(e) {
console.log("音量变更了");
console.log(e);
})
// 18、stalled: 当浏览器尝试获取媒体数据，但数据不可用时吃法
videoDOM.addEventListener('stalled', function(e) {
console.log("媒体数据不可用");
console.log(e);
})
// 19、ratechange: 当视频播放速度收到更改时
videoDOM.addEventListener('ratechange', function(e) {
console.log("视频播放速度已更改");
console.log(e);
})
</script>
</body>
</html>
<style type="text/css">
header,
section,
nav,
article,
footer {
text-align: center;
}
article {
margin: 30px 0 10px 0;
font-size: 1.25rem;
font-weight: bold;
color: mediumblue;
}
#video_demo {
position: relative;
}
#video_demo,
#videoOper {
display: flex;
flex-direction: row;
justify-content: center;
}
#videoOper {
margin: 0.625rem 0;
}
#adver {
position: absolute;
}
</style>
效果截图
简单的学习效果.png
