html5 video标签(属性和事件)
发布时间
阅读量：
阅读量
html5 video标签学习(基础标签属性和事件)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Video Study</title>
</head>
<body>
<!-- 基础用法，controlslist可以控制工具栏，如下、全屏等功能 -->
<video src="./test.mp4" width="400" height="255" controls controlslist="nodownload"></video>
<!-- 贴图 poster -->
<video src="./test.mp4" width="400" height="255" controls poster="./poster.jpg"></video>
<!-- 自动播放 autoplay -->
<video src="./test.mp4" width="400" height="255" controls autoplay></video>
<!-- 默认静音 muted -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted></video>
<!-- 循环播放 loop -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted loop></video>
<!-- 预加载 preload -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted loop preload></video>
<!-- 控制音量 -->
<video id="_volume" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_volume');
v.volume = 0.3;
</script>
<!-- 播放时间控制 -->
<video id="_time" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_time');
console.log(v.currentTime);
v.currentTime = 60; // 单位是秒
</script>
<!-- 播放地址控制 -->
<video id="_src" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_time');
console.log(v.src);
setTimeout( function() {
v.src = '';
}, 3000);
</script>
<!-- 备用地址切换 -->
<video id="_source" width="400" height="255" controls poster="./poster.jpg">
<source src="./a.mp4" type="video/mp4">
</video>
<script type="text/javascript">
var v = document.getElementById('_source');
for (var i = 0; i < 3; i++) {
var newSource = document.createElement('source');
newSource.src = './b' + i + '.mp4';
newSource.type = 'video/mp4';
v.appendChild(newSource);
}
var newSource = document.createElement('source');
newSource.src = './test.mp4';
newSource.type = 'video/mp4';
v.appendChild(newSource);
setTimeout(function () {
console.log(v.currentSrc);
var sources = v.getElementsByTagName('source');
console.log('sourecs', sources);
}, 1000);
</script>
<!-- video事件 -->
<video id="vs" src="./test.mp4" width="400" height="255" controls></video>
<script type="text/javascript">
var v = document.getElementById('vs');
// 加载开始
v.addEventListener('loadstart', function(e) {
console.log('loadstart');
});
// 视频总时长发生变化时
v.addEventListener('durationchange', function(e) {
console.log('durationchange', v.duration);
});
// 源数据已经加载完成
v.addEventListener('loadedmetadata', function(e) {
console.log('loadedmetadata');
});
// 没有足够的视频帧和音频帧数据，播放下一个视频的片段
v.addEventListener('loadeddata', function(e) {
console.log('loadeddata');
});
// 正在下载数据
v.addEventListener('progress', function(e) {
console.log('progress');
});
// 已经准备完毕，可以正确播放了
v.addEventListener('canplay', function(e) {
console.log('canplay');
});
// 可以流畅的播放了
v.addEventListener('canplaythrough', function(e) {
console.log('canplaythrough');
});
// 状态改为播放时触发
v.addEventListener('play', function(e) {
console.log('play');
});
// 状态改为暂停时触发
v.addEventListener('pause', function(e) {
console.log('pause');
});
// 点击进度条
v.addEventListener('seeking', function(e) {
console.log('seeking');
});
// 点击进度条后数据加载完毕
v.addEventListener('seeked', function(e) {
console.log('seeked');
});
// 点击进度条后在等待数据
v.addEventListener('waiting', function(e) {
console.log('waiting');
});
// 只要从暂停状态到播放状态就会触发
v.addEventListener('playing', function(e) {
console.log('playing');
});
// 播放完毕
v.addEventListener('ended', function(e) {
console.log('ended');
});
// 播放出错
v.addEventListener('error', function(e) {
console.log('error', e);
});
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~