自定义video

于 2024-07-17 15:01:08 发布
阅读量503 收藏 13
点赞数 12
分类专栏： 案例 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34708564/article/details/140495334
版权

需求

  1. 播放暂停切换
  2. 播放进度条反馈和控制 (拖拽 点击) 播放时间 00:00/05:30
  3. 音量调控 反馈 一键静音/取消静音
  4. 全屏播放 循环模式
  5. 播放状态反馈 未播放 已播放 播放完毕
  6. 本地存储播放时间 自动续播

准备

        [
	        {
	          方法:[ play(),pause()],
	          属性: [paused],
	          element:[#contr-play]
	        },{
	          方法:[ mousedown,pause,mousemove,mouseup,play],
	          属性: [currentTime],
	          element:[player-progress,progress-line,progress-unit,player-time,player-current]
	        },{
	          方法:[ mousedown,mousemove,mouseup],
	          属性: [volume,muted],
	          element:[]
	        },{
	
	        }

        ] 
        
        * video设置currentTime的时候 会触发 canplay事件

        * 拖拽进度条之后 播放视频

        点击进度条某个位置 直接开始跳转播放 

        click {
          mousedown 
          mouseup
        }

效果

在这里插入图片描述

实现

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>video 播放器</title>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url('fonts/iconfont.eot?t=1600426546624');
      /* IE9 */
      src: url('fonts/iconfont.eot?t=1600426546624#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAS4AAsAAAAACZwAAARrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqGEIUYATYCJAMYCw4ABCAFhG0HWBtOCFGULspqsq+wKWO+GKJwXogXwkCjQQ+Evn05o/Tmdn/CWtgG7CKF5wDBE+3X3uzO7ldJh0qDrg1PXronIomYrETRBCXeT3b2b3lEpbkvLFIehM2H9pLZzSaenZwqqfxQaVQqGrOyuvDwtnv/7k9So5BJKoGZTRUuRKGkK0x2QTiRPI44CCLOEosr0+0G0l/4RJO7B8EAIYJA47YGzrlqkEjLIJhA8XigAzpJpmAVUP1xr+qf5x8s61myQaI496BcKFwuUIHGXmQtSLmCWgewTbzfuh4CYqPWYKb61l6Ip/TdBMhpmTrEJ+y0ghKhyRccm8gHgrDcszcAePB+Xn5wJB4MV9FvdLjVuaGyp3ePG401m+oojA7nBdiTwIJlgELeQv8FLsgv48TyX+BtA1IhQ/tqFrOS69292J+EWg+L1PiXB46lDIEMQJ9S5K7OHaDCkkeGYlixMFTCisJwDGwY/N9TXpbZD9gzAPwBiGwk6QcOfgcvpWOqmuni+nDbJCffPri99vX5c4JDgObuNOtT9Qobn1udt1pvXyqbSOFmnLnrUp1xT05in3ORNC6+nT8KbDu2cILh7o5rl+7K1J35e9b7WiHOI4LWDRwQhtIW7srqIIzWBM4jQrddyno3JkG8WNmroq/UENHQrkXGZmh3yKq0M7oO1tmbuCt311QH7T+SszNH3zmavW3H1gfaO3fpCqqAIVBbk3Rl6+lFYfQpjxD/1LCiaKujjpQD+89yHz9y0JxlpFBTnnAd1a2FWEvuByU7/O7KqNeXCjfdL1cSSuJRmNo0Bpn8r4CxZCUHHcjbCN6cUle4Ls4hLHIutpit6Y6v6lp58hMru1btw3RqwOWJcnTx2zmdm0nVEhLUh2y1sY2ZRsiMJ91hePo8SkrtC2z+X28ZH25J8x/lc11WCMukL2WvGeIKj5MKnvzeVZWYhp/oVg54db9lpL7krXtXOz+MYaIn3rxmf0cKGU2aLN3uOQqu3RZ9sPmavnmV/5xqhowU6qgjOVx+IowrAqhXhNR4GWQA/BR+4datAgD7sL8Y/reDi/+X/Q6P6ylpaaV/QlEAPuYvOLy+4WiCbQB/FQONFf8pRcM5VVS6w6c02xpCgLf/sbIGxMYS/JPCtVdDBTsQeUXIKQBGYASs0DSq5DI4iVXwQmsQW9JwcqJBcCQjYNEUAaJ0BozcM1ilm6iSL8HpfQGvDAexo8g6Z2I2VmINwTrFbtQ/jCxXKGiYLprot3ZjM+rXSVzl0TRMbCuFVElJlxpwEJMhDrAHTAelBjJIKIDqiZthvz+EwiTkxS4qeSgNF8uyUfRFkisUgERbCExHYW5Iv2GIxSUkyHBWphIz398NM0X56UjFTFlUgxE2a+2ISqI0QBv0wUYzl/IS2wCTA0UZEAMREoDUE17Mb+RDkHDxVl6YCyXxdMiGFZPJRUZTvTS9MXCXVwEx/aN8GLGi4sRLgLv1qI3jhqJBT1QPxg9bQb+lB834SGLzsBU0xU6/PowJAAA=') format('woff2'),
        url('fonts/iconfont.woff?t=1600426546624') format('woff'),
        url('fonts/iconfont.ttf?t=1600426546624') format('truetype'),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('fonts/iconfont.svg?t=1600426546624#iconfont') format('svg');
      /* iOS 4.1- */
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 32px;
      color: #ccc;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      cursor: pointer;
    }

    .icon-pause:before {
      content: "\e7d2";
    }

    .icon-loop:before {
      content: "\e6a9";
    }

    .icon-volume:before {
      content: "\e63a";
    }

    .icon-fullscreen:before {
      content: "\e640";
    }

    .icon-player:before {
      content: "\e62b";
    }

    div {
      box-sizing: border-box;
    }

    video {
      display: block;
      width: 100%;
      max-height: 100%;
    }

    .player {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 638px;
      height: 493px;
      margin: 100px auto;
      background-color: #000;
    }

    .player .hint {
      position: absolute;
      top: 0;
      width: 100%;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 20px;
      letter-spacing: .2em;
    }

    .player-screen {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
    }


    .player-controls {

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px;
    }


    .player-progress {
      position: relative;
      width: 100%;
      height: 4px;
      background-color: #ccc;
    }

    .player-progress:hover .progress-unit {
      display: block;
    }

    .player-progress .progress-line {
      position: relative;
      width: 0;
      height: 4px;
      background-color: rgb(18, 177, 226);
    }

    .player-progress .progress-unit {
      display: none;
      position: absolute;
      right: -18px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: rgb(18, 177, 226);
      cursor: pointer;
    }

    .player-time {
      position: absolute;
      right: 0;
      top: -35px;
      color: #fff;
    }

    .player-controls .player-operator {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 4px 20px;
    }

    .operator-right {
      display: flex;
      align-items: center;
    }

    .operator-right i {
      padding: 0 6px;
    }


    .is-loop {
      color: pink;
    }

    .is-muted {
      color: red;
    }

    .volume-range {
      width: 100px;
      height: 5px;
    }
  </style>
</head>

<body>
  <div id="my-player" class="player">
    <p class="hint">暂未播放影片</p>
    <div class="player-screen">
      <video src="video/mp4.mp4">
        <source src="video/mp4.mp4" type="video/mp4">
      </video>
    </div>

    <div class="player-controls">
      <div class="player-progress">
        <p class="player-time"><span class="player-current">00:00:00</span> / <span class="player-count">00:00:00</span>
        </p>
        <div class="progress-line">
          <div class="progress-unit"></div>
        </div>
      </div>
      <div class="player-operator">
        <i id="contr-play" class="iconfont icon-player icon-pause"></i>

        <div class="operator-right">
          <input type="range" value="0.1" id="volume-range" class="volume-range">
          <i id="contr-volume" class=" iconfont icon-volume"></i>
          <i id="contr-loop" class=" iconfont icon-loop"></i>
          <i id="contr-full" class=" iconfont icon-fullscreen"></i>

        </div>
      </div>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script src="js/Storage.js"></script>
  <script>
    class MyVideo {
      static progressMaxWidth = $('.player-progress').offsetWidth;

      constructor(player = $('video')) {
        this.player = player;
        this.canPlay = false; //视频可播放状态 视频加载到可以播放状态的时候 canPlay 为true 默认false
        this.storage = new Storage('local');
        this.$ele = {
          $playBtn: $('#contr-play'), //播放|暂停按钮
          $progress: $('.progress-line'), //进度条
          $progressUnit: $('.progress-unit'), //进度条按钮
          $currentTime: $('.player-current'), //当前播放时长
          $countTime: $('.player-count'), //总时长
          $fullScreen: $('#contr-full'),//全屏按钮
          $loop: $('#contr-loop'), //切换循环loop状态
          $volumeBtn: $('#contr-volume'),
          $volumeRange: $('#volume-range'),
        }
        //进度条数据集
        this.progress = {
          isDown: false, //是否按下鼠标
          startX: 0, //起始鼠标x方向位置
          width: 0, //起始进度条宽度
        };
        //事件总控制
        this.eventListener();
      }

      //设置触发 左查询 写入
      set isPaused(val) {
        this._paused = val;
        if (val) {
          this.myPlay();
          return false;
        }
        this.myPause();
      }


      //获取触发 右查询 读取
      get isPaused() {
        return this._paused; //return的值会作为 isPaused属性的值
      }


      set volume(val) {
        this._volume = val;
        this.player.volume = val;
        this.$ele.$volumeRange.value = val * 100;
      }


      get volume() {
        return this._volume;
      }


      //初始化
      initPlayer() {

        if (this.canPlay) {
          return false;
        }
        this.volume = 0.1;
        this.player.volume = this.volume; //初始化音量
        this.canPlay = true; //初始化可播放状态

        this.checkPlayHistory();//检查本地存储该视频是否有播放时间戳 如果存在设置播放时间戳跳转
        this.setCountTimeText()//初始化总播放时长
        this.setCurrentText(); //初始化当前播放时长
      }

      checkPlayHistory() {
        let current = ~~this.storage.getStorage(this.player.src);
        if (!current) {
          return false;
        }
        this.setCurrentTime(null, current);
      }

      eventListener() {
        //事件分发映射表
        const dragMap = {
          'mousedown': (e) => {
            const target = e.target;

            //按下鼠标的时候 判断触发元素是否是progress-unit
            if (e.target.className === 'progress-unit') {
              //拖拽流程
              if (this.progress.isDown) {
                return false;
              }
              this.progress.startX = e.clientX;
              this.progress.isDown = true;
              this.progress.width = this.$ele.$progress.offsetWidth;
              this.isPaused = false;

              return false; //终止后续执行
            }

            //类名中是否包含progress 判断是否点击在 进度条上 => 进度跳转
            if (/progress/g.test(e.target.className)) {

              let _x = e.clientX - getPosition($('.player-progress')).left;
              let ratio = _x / MyVideo.progressMaxWidth;
              let time = ratio * this.player.duration;
              this.setCurrentTime(null, time);
              this.isPaused = true;
            }
          },
          'mousemove': (e) => {
            if (!this.progress.isDown) {
              //如果没有开启拖拽 
              return false;
            }
            //_x 鼠标拖拽x方向位移增量
            let _x = e.clientX - this.progress.startX;
            //width 当前进度条宽度 = 增量+初始宽度
            let width = _x + this.progress.width;

            //ratio 比例 = 当前宽度/总宽度
            let ratio = width / MyVideo.progressMaxWidth;
            //time 当前播放市场 = 比例 * 总时长 
            let time = ratio * this.player.duration;
            this.setCurrentTime(null, time);
          },
          'mouseup': (e) => {
            if (!this.progress.isDown) {
              //如果没有开启拖拽 
              return false;
            }
            this.isPaused = true; //set isPaused
            this.progress.isDown = false;
          }
        }

        //事件控制器 监听
        this.$ele.$playBtn.addEventListener('click', () => {
          //获取暂停当前状态 isPaused true暂停 false播放
          this.isPaused = this.player.paused;
          //监听播放/暂停按钮的点击
          if (!this.canPlay) {
            //判断是否可以播放 默认true
            return false;
          }

        }, false);

        //监听可播放状态 调用 initPlayer
        this.player.addEventListener('canplay', this.initPlayer.bind(this));

        //播放时间更新触发
        this.player.addEventListener('timeupdate', this.setCurrentTime.bind(this));

        //监听全屏切换按钮
        this.$ele.$fullScreen.addEventListener('click', this.changeFullScreen.bind(this));

        this.$ele.$loop.addEventListener('click', this.changeLoop.bind(this));

        this.$ele.$volumeRange.addEventListener('change', this.changeVolume.bind(this), false);

        this.$ele.$volumeBtn.addEventListener('click', this.chageMuted.bind(this), false);

        //当页面完全不可见的时候  存储视频播放信息
        document.addEventListener('visibilitychange', () => {
          if (document.hidden) {

            this.isPaused = false; //暂停视频
            this.setVideoInfo();
          }
        });


        //事件分发 
        const drag = (e) => {
          let type = e.type;
          if (dragMap.hasOwnProperty(type)) {
            dragMap[type](e);
          }
        }

        //监听进度条的拖拽组
        document.addEventListener('mousedown', drag, false);
        document.addEventListener('mousemove', drag, false);
        document.addEventListener('mouseup', drag, false);


      }

      //设置进度条
      setProgress(done) {
        //进度条比例 .progress-line 的宽度  = 当前播放(秒)/视频总时长(秒) * 100 + '%'

        let ratio = this.player.currentTime / this.player.duration * 100;
        if (done) {
          this.progress.width = ratio * MyVideo.progressMaxWidth;
          return false;
        }
        //设置进度条DOM的宽度样式
        this.$ele.$progress.style.width = ratio + '%';

      }

      //设置当前播放时间反馈
      setCurrentTime(e, time) {
        if (time) {
          this.player.currentTime = time;
        }
        //设置进度条
        this.setProgress();
        //设置当前播放时间text
        this.setCurrentText();
      }


      //设置当前播放时间文本
      setCurrentText() {
        this.$ele.$currentTime.innerText = this.getCurrentTime();
      }

      //设置总时长文本
      setCountTimeText() {
        this.$ele.$countTime.innerText = this.getCountTime();
      }

      //获取总时间 s=> h:m:s
      getCountTime() {
        //duration 视频总时长
        return MyVideo.fromatTime(this.player.duration);
      }

      //获取当前播放时长 s=> h:m:s
      getCurrentTime() {
        return MyVideo.fromatTime(this.player.currentTime);
      }


      //静态方法 内部的工具方法
      static fromatTime(time) {
        let [s, m, h] = [~~(time % 60), ~~(time / 60), ~~(time / 3600)];
        [s, m, h] = [s, m, h].map(padLeft);
        return `${h}:${m}:${s}`;
      }


      //播放动作
      myPlay() {
        this.$ele.$playBtn.classList.remove('icon-player');
        this.player.play();
      }


      //暂停动作
      myPause() {
        this.$ele.$playBtn.classList.add('icon-player');
        this.player.pause();
      }

      //全屏切换
      changeFullScreen() {
        if (!isFullScreen()) {
          openFullScreen(this.player);
          return false;
        }
        closeFullScreen();
      }


      //切换循环状态
      changeLoop(e) {
        this.player.loop = !this.player.loop;
        e.target.classList.toggle('is-loop');
      }


      //音量调整
      changeVolume(e) {
        let ratio = Number(e.target.value) / 100;
        this.volume = ratio;
      }

      chageMuted(e) {
        this.player.muted = !this.player.muted;
        e.target.classList.toggle('is-muted');
      }

      //存储观看信息 到本地存储
      setVideoInfo() {
        //视频src=>ID 播放时间
        if (!this.canPlay) {
          //视频准备好了播放的情况下才存储
          return false;
        }
        this.storage.setStorage({
          [this.player.src]: this.player.currentTime
        })

      }
    }

    function padLeft(num) {
      return String(num)[1] && String(num) || '0' + num;
    }

    const myPlay = new MyVideo();
  </script>
</body>

</html>
喵_美
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义video标签进度条
dengzhuanhu2252的博客
08-11 1159
<!doctype html> <html> <head> <meta charset="utf-8"> <title>短视频</title> <style lang="en"> html, body{ ...
Android学习过程之自定义video
Not_Important的博客
09-08 478
自定义多媒体播放video 文章目录自定义多媒体播放video一、使用系统自带的VideoView播放视频注意： 当视频无法播放时，一般可能为无法打开此视频文件，此时需注意软件是否含有读取文件的权限。在读取文件之前要确保软件已经获取了文件的访问权限。 一、使用系统自带的VideoView播放视频 在资源文件中添加VideoView标签 <VideoView android:id="@+id/sys_video" android:layout_width="match_parent" an
自定义video标签样式
ZhuCongLin_68的博客
05-13 148
【代码】自定义video标签样式。
自定义video的样式
weixin_43152938的博客
03-24 4155
一般情况下，video的样式可以满足正常的需求了，但是有时候仍然会要求修改video的样式，下面就是记录一下自定义video样式的代码。 它可以实现进度的拖拽，音量的拖拽和静音，双击全屏功能的实现等 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
自定义video控件
weixin_44892714的博客
09-16 1254
主要思路是取消video提供的原生控件，然后自定义dom元素事件中通过video提供的播放、暂停、进度、声音、全屏等api控制 https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player ...
自定义video的controls
大湿胸的博客
08-08 9973
主要用到的video属性和方法： duration  视频总时长，单位秒 currentTime  当前已播放视频时长，单位秒 muted  设置视频静音(true||false) ontimeupdate  当视频当前播放时长改变时触发的事件 play()  播放视频 pause()  暂停视频 接下来上代码（播放按钮和静音键样式比较粗糙，看功能就行） &lt;!DOCTYPE...
vue3自定义video标签视频样式
m0_72795372的博客
04-29 346
vue3自定义video标签视频样式
jq 自定义video视频进度条
u010022260的博客
10-11 1908
因工作需要，需要写一个自定义进度条，在网上找了一些，一直没找到如意的，看了一些网友的代码，然后自己重新写了一下。若有错误，欢迎指正。 参考了网友的代码：https://blog.csdn.net/weixin_33970449/article/details/85757733 注意：一定要在本地打开，不要通过HBuilder打开。 先贴全部代码： <!DOCTYPE html> &lt...
Vue2系列教程——自定义video样式
DTCloud
05-26 3201
Vue2 自定义video样式 具体实现，请看如下代码详解， <template> <div> <div style="width: 100%; height: 50px"></div> <div class="player"> <video id="myVideo" ref="video" src="../assets/video/sintel.mp4"></video>
vue2使用vant-slider 组件自定义video进度条
M_yI_Hg的博客
05-09 254
【代码】vue2使用vant-slider 组件自定义video进度条。
vue项目中自定义video视频控制条的实现代码
11-21
在Vue项目中，自定义video视频控制条是一个常见的需求，特别是在提升用户体验方面。这个过程涉及到对HTML5 Video API的理解以及Vue.js组件的构建。以下是如何实现这个功能的详细步骤： 首先，我们需要创建一个Vue...
html5自定义video标签的海报与播放按钮功能
11-21
1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原比例显示在div内 css: .yourDiv{ background-color: black; height:20em...
vue-video:vue移动端简单自定义控件播放器
05-13
"vue-video" 提供了一个针对移动端优化的简单自定义控件播放器解决方案，使得在Vue项目中集成视频播放功能变得简单。 在创建一个基于Vue的移动端视频播放器时，主要涉及以下几个关键知识点： 1. **Vue组件**：Vue...
文字和盒子对齐
喵喵的博客
05-17 1975
实现文字和粉色盒子对齐： 该方法适合调整文字前面图标的位置，图标放在盒子内，可用背景图或图片的形式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { ...
滑动门原理
喵喵的博客
05-15 1672
滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精...
旋转木马案例
喵喵的博客
07-08 783
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
放大镜案例
最新发布
喵喵的博客
07-08 768
/ 展示比例 (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)
选项卡切换（排他法、轮转法、轮转法之事件委托）
喵喵的博客
07-08 670
tabbar content 两部分的内容一一对应，我们点击某一个tab的时候，该tab的类名设置为on，其他的tab要清除on类名，对应的content的类名要设置为 active ，其他的content清除active类名。// aTab[i].onclick = function () { //循环绑定事件耗资源，优化事件委托。//方法三：轮转法之事件委托优化 通过监听父元素的点击事件，找到点击的子元素下标。//触发事件的DOM目标。
简体字转繁体字案例
喵喵的博客
05-22 659
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 简繁体转换(见备注资料) var arr = ["你=伱", "说=詤", "我=莪",...
html5自定义video按钮
09-03
HTML5提供了一种自定义video按钮的功能，可以通过编写自定义的HTML和CSS代码来实现。自定义按钮可以用于控制视频的播放、暂停、停止和音量等功能。 首先，我们可以通过HTML代码创建一个自定义的按钮元素，并添加一个唯一的id属性以便于JavaScript代码操作。例如： ``` <button id="playButton">播放</button> ``` 接下来，我们可以使用CSS样式来美化按钮的外观和样式。例如： ``` #playButton { background-color: #008CBA; color: white; padding: 10px 20px; border: none; cursor: pointer; } ``` 现在我们需要使用JavaScript代码来实现按钮的功能。我们可以使用video对象的play()方法来控制视频的播放和暂停，以及使用pause()方法来暂停视频。例如： ``` var video = document.getElementById("myVideo"); document.getElementById("playButton").addEventListener("click", function() { if (video.paused) { video.play(); } else { video.pause(); } }); ``` 此外，我们还可以使用HTML5提供的其他属性和方法来实现更多的功能，例如设置音量、静音等操作。例如： ``` document.getElementById("volumeButton").addEventListener("click", function() { if (video.muted) { video.muted = false; } else { video.muted = true; } }); ``` 通过自定义HTML、CSS和JavaScript代码，我们可以很容易地实现HTML5自定义video按钮，使视频播放更加个性化和用户友好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值