html5如何实现video的基本功能 - web建站教程手机端

html5如何实现video的基本功能，下面web建站小编给大家详细介绍一下实现代码！

实现代码如下：

var vol = 0.1;  //1代表100%音量，每次增减0.1
var time = 2; //单位秒，每次增减10秒

function listenKeyboard() {
  var videoElement = document.getElementById("video");
  document.onkeyup = function (event) {//键盘事件
  
    var e = event || window.event || arguments.callee.caller.arguments[0];
  
    //鼠标上下键控制视频音量
    if (e && e.keyCode === 38) {
      console.log("音量加1");
      // 按 向上键
      videoElement.volume !== 1 ? videoElement.volume += vol : 1;
      return false;
    } else if (e && e.keyCode === 40) {
      console.log("音量减1");
      // 按 向下键
      videoElement.volume !== 0 ? videoElement.volume -= vol : 1;
      return false;
    } else if (e && e.keyCode === 37) {
      console.log("倒退1秒");
      // 按 向左键
      videoElement.currentTime !== 0 ? videoElement.currentTime = videoElement.currentTime -= time : 1;
      return false;
    } else if (e && e.keyCode === 39) {
      console.log("前进2秒,当前时间是:"+videoElement.currentTime+",视频长度是："+videoElement.duration);
      // 按 向右键
      var currPlayTime = videoElement.currentTime ;
      if (currPlayTime !== videoElement.duration){
        var afterSetTime = currPlayTime + time ;
        console.log('afterSetTime should be :'+afterSetTime) ;
        videoElement.currentTime = afterSetTime ;
        console.log('afterSetTime is :'+videoElement.currentTime) ;
      }else {
        videoElement.currentTime = videoElement.currentTime + 1;
      }
      console.log("快进后的时间是:"+videoElement.currentTime);
      return false;
    } else if (e && e.keyCode === 32) {
      console.log("暂停");
      // 按空格键 判断当前是否暂停
      videoElement.paused === true ? videoElement.play() : videoElement.pause();
      return false;
    }
  }
}

标签： html5, video

上面是“html5如何实现video的基本功能”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3013.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！