html5的video播放器标签音量大小、快进、播放等控制

阿酷tony

已于 2024-08-14 09:04:05 修改

阅读量232

点赞数 2

分类专栏： html5 播放器开发专栏文章标签： html5 前端 html

于 2024-08-14 09:02:55 首次发布

本文链接：https://blog.csdn.net/ffffffff8/article/details/141180822

版权

html5 同时被 2 个专栏收录

144 篇文章 6 订阅

订阅专栏

播放器开发专栏

32 篇文章 5 订阅

订阅专栏

酷播云倍速播放功能_播放效果

html5的video播放器标签音量大小、快进、播放等控制

   //reurn false 禁止函数内部执行其他的事件或者方法
      var vol = 0.1;  //1代表100%音量，每次增减0.1
      var time = 10; //单位秒，每次增减10秒
      var videoElement = document.getElementById("videoPlay");
      console.log(videoElement.paused);
  
      document.onkeyup = function (event) {//键盘事件
  
          console.log("keyCode:" + event.keyCode);
          var e = event || window.event || arguments.callee.caller.arguments[0];
 
         //鼠标上下键控制视频音量
         if (e && e.keyCode === 38) {
 
             // 按 向上键
             videoElement.volume !== 1 ? videoElement.volume += vol : 1;
             return false;
 
         } else if (e && e.keyCode === 40) {
 
             // 按 向下键
             videoElement.volume !== 0 ? videoElement.volume -= vol : 1;
             return false;
 
         } else if (e && e.keyCode === 37) {
 
             // 按 向左键
             videoElement.currentTime !== 0 ? videoElement.currentTime -= time : 1;
             return false;
 
         } else if (e && e.keyCode === 39) {
 
             // 按 向右键
             videoElement.volume !== videoElement.duration ? videoElement.currentTime += time : 1;
             return false;
 
         } else if (e && e.keyCode === 32) {
 
             // 按空格键 判断当前是否暂停
             videoElement.paused === true ? videoElement.play() : videoElement.pause();
             return false;
         }
 
     };

Video标签的属性，方法和事件汇总

video标签的属性
src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>  
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
Media = document.getElementById("media");

相关事件

eventTester(“loadstart”); //客户端开始请求数据
eventTester(“progress”); //客户端正在请求数据
eventTester(“suspend”); //延迟下载
eventTester(“abort”); //客户端主动终止下载（不是因为错误引起）
eventTester(“loadstart”); //客户端开始请求数据
eventTester(“progress”); //客户端正在请求数据
eventTester(“suspend”); //延迟下载
eventTester(“abort”); //客户端主动终止下载（不是因为错误引起），
eventTester(“error”); //请求数据时遇到错误
eventTester(“stalled”); //网速失速
eventTester(“play”); //play()和autoplay开始播放时触发
eventTester(“pause”); //pause()触发
eventTester(“loadedmetadata”); //成功获取资源长度
eventTester(“loadeddata”); //
eventTester(“waiting”); //等待数据，并非错误
eventTester(“playing”); //开始回放
eventTester(“canplay”); //可以播放，但中途可能因为加载而暂停
eventTester(“canplaythrough”); //可以播放，歌曲全部加载完毕
eventTester(“seeking”); //寻找中
eventTester(“seeked”); //寻找完毕
eventTester(“timeupdate”); //播放时间改变
eventTester(“ended”); //播放结束
eventTester(“ratechange”); //播放速率改变
eventTester(“durationchange”); //资源长度改变
eventTester(“volumechange”); //音量改变

<video id="myVideo" controls="controls">
    <source type="video/mp4" src="mi.mp4">
</video>

<script>
	function videoInit(){
        let elevideo = document.getElementById('myVideo');
        elevideo.addEventListener('loadedmetadata', () => {
            //视频的总长度
            console.log('总长度:' + elevideo.duration);
            clearInterval(this.timer);
        });
        elevideo.addEventListener('play', () => {
            //播放开始执行的函数
            console.log('开始播放');
        });
        elevideo.addEventListener('playing', () => {
            //播放中
            console.log('播放中');
            this.timer = setInterval(() => {
                console.log('播放进度:' + parseFloat(elevideo.currentTime));
            }, 100);
        });
        elevideo.addEventListener(
            'ended',
            () => {
                //结束
                console.log('播放结束');
                clearInterval(this.timer);
            },
            false
        );
    };
</script>
————————————————
版权声明：本文为CSDN博主「前端魅力无限」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41827052/article/details/123639686