HTML5 多媒体video，autio使用示例

fteair · 发表于 2020-2-28 17:55:37

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AV</title>
</head>
<body>
<div class="content">
<p>注意:audio标签设置controls="controls"才可以再页面中显示</p>
<p>IE9开始支持</p>
<div class="audio">
<audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>
不支持audio
</audio>
</div>
<div class="video">
<video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">
不支持video
</video>
</div>
<div class="networkState"></div>
<button id="getVideoURL">getVideoURL</button>
<button id="palyVideo">palyVideo</button>
<button id="pauseVideo">pauseVideo</button>
</div>
<script>
var page = {
init : function(){
this.listener();
},
listener : function(){
var video = document.getElementById('videoElement');
//error属性：不能正常读取，使用媒体数据
video.addEventListener('error', function(){
var error = video.error;
switch(error.code){
case 1 :
alert("视频的下载过程被中止");
break;
case 2 :
alert("网络发生故障，视频的下载过程被中止");
break;
case 3 :
alert('解码失败');
break;
case 4 :
alert("媒体资源不可用或是媒体格式不被支持");
}
},false);
//networkState属性:加载过程使用networkState属性读取当前网络状态
video.addEventListener('progress',function(e){
var networkStateDisplay = document.getElementById('networkState');
if(video.networkState === 2){
//计算已加载的字节数与总字节数
networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";
}
else if(video.networkState === 3){
networkStateDisplay.innerHTML = "加载失败";
}
},false);
//使用currentSrc属性：读取媒体数据的URL地址(只读)
var videoURL = video.currentSrc,
videoURLBtn = document.getElementById('getVideoURL');
videoURLBtn.onclick = function(){
//这里是空的，还不知道为什么???
console.log(videoURL);
}
//buffered属性
//readState属性
//seeking属性与seekable属性
//currenTime属性
//startTime属性
//duration属性
//play属性(开始时间,结束时间)
//paused属性(true_暂停，false_播放)
//ended属性(true_播放完毕，false_未完毕)
//defaultPlaybackRate,playbackRate属性
//volume,muted属性
/*
方法：
play(),播放
pause(),暂停
load(),重新载入
*/
//监听视频播放结束事件
//注意这里不设置loop循环播放
video.addEventListener('ended',function(){
alert("播放结束");
},true)
var palyVideoBtn = document.getElementById('palyVideo'),
pauseVideoBtn = document.getElementById('pauseVideo');
//播放视频play()
palyVideoBtn.onclick = function(){
video.play();
}
//暂停视频pause()
pauseVideoBtn.onclick = function(){
video.pause();
}
/*
canPlayType方法:
空字符串——不支持
maybe——可能支持
probably：支持
*/
var support = video.canPlayType("video/mp4");
console.log(support);//maybe
/*
在媒体读取和播放的过程中，还有一系列的事件。
对这些事件的捕捉：
(1)监听的方式
(2)获取事件句柄
*/
}
}
window.onload = page.init();
</script>
</body>
</html>

复制代码

张兴康 · 发表于 2020-2-28 14:00:09

fteair · 发表于 2020-2-28 17:40:27

fteair · 发表于 2020-2-28 17:41:00

		自动登录	找回密码
密码			立即注册

[分享] HTML5 多媒体video，autio使用示例