h5实现视频播放效果
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- inline_block元素： input ,button , img ,audio ,video ,canvas-->
<!--音频-->
<audio id="myAudio" src="resource/audio/test.mp3" controls></audio>
<!--视频-->
<video id="myVideo" src="resource/video/test.mp4" controls></video>
</body>
<script type="text/javascript">
var myAudio = document.getElementById('myAudio');
var myVideo = document.getElementById('myVideo');
// ontimeupdate:播放的过程中实时触发
myVideo.ontimeupdate = function () {
// duration:音视频总时长(未格式化的秒)
// console.log(myVideo.duration)
// currentTime： 当前播放时长
// console.log(myVideo.currentTime);
// paused: 布尔值 音视频文件是否暂停 true表示暂停 false表示播放
// console.log(myVideo.paused);
// ended:布尔值 音视频文件播放结束 （true表示播放结束 false表示播放中或者暂停）
console.log(myVideo.ended);
}
myVideo.onvolumechange = function () {
// volume 返回当前的音量 取值范围 0-1之间
console.log(myVideo.volume);
// muted :是否静音 true表示静音 false 表示非静音
console.log(myVideo.muted)
// 1.当拖拽音量进度条时 至音量值为0 muted状态不能正确的更新到true
// 2.当点击静音按钮时 音量值不能正确的显示 （还是会显示之前的音量 而不能更新为0）
// myVideo.volume = 0.5;
if(myVideo.volume === 0){
myVideo.muted = true;
}
}
</script>
</html>
标签：视频,console,log,myVideo,h5,音量,播放,true 来源： https://www.cnblogs.com/w-sir/p/15132123.html