h5实现视频播放效果

2021-08-12 12:34:21 阅读：164 来源： 互联网

标签：视频 console log myVideo h5 音量播放 true

<!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>
![](https://www.icode9.com/i/l/?n=20&i=blog/2440504/202108/2440504-20210812121209379-400185169.png)

标签：视频,console,log,myVideo,h5,音量,播放,true
来源： https://www.cnblogs.com/w-sir/p/15132123.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

h5实现视频播放效果