• 售前

  • 售后

热门帖子
入门百科

JS实现简单控制视频播放倍速的实例代码

[复制链接]
千无情实 显示全部楼层 发表于 2021-10-26 12:55:34 |阅读模式 打印 上一主题 下一主题
弁言

之前就发现一个题目:偶然间看一些学习视频,总是嫌它动作太慢,老师黑板上写板书很浪费时间,要是控制合适倍速播放,如许既能提拔学习服从,也能让自己看着舒服点。以是我就学着写了下面这个网页,通过Html+CSS+JavaScript实现。
提示:以下是本篇文章正文内容,下面案例可供参考
一、成品效果


二、具体实现

1.HTML+CSS实现简单布局
代码如下(示例):
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="style.css" rel="external nofollow" >
  8.     <title>视频播放</title>
  9.    
  10. </head>
  11. <body>
  12.     <div id="wrapper">
  13.         <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls class="flex"></video>
  14.         
  15.         <div class="speed">
  16.             <div class="speed-bar">1x</div>
  17.         </div>
  18.         
  19.     </div>
  20.    
  21.     <script src="./index.js"></script>
  22. </body>
  23. </html>
复制代码
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     min-height: 100vh;/*   vh相对单位,相对于浏览器的尺寸改变*/
  7.     background: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
  8.     background-size: cover;/*以容器为基准,将容器覆盖满,哪怕图片失真、模糊*/
  9.     /*margin: auto;/* margin:auto和margin:0 auto    但不知道父容器宽高,不合适*/
  10.     display: flex;/*将容器设置为弹性容器*/
  11.     justify-content: center;    /*在X方向居中*/
  12.     align-items: center;        /*在Y方向居中*/         /*课外拓展:将盒子在垂直方向居中的所有方式*/
  13. }
  14. #wrapper{
  15.     width: 850px;
  16.     display: flex;
  17. }
  18. .speed{
  19.     flex: 1;/*等比继承,本来应该是1:1继承,但是vedio有固定宽度,所以speed拿剩下宽度*/
  20.     margin: 10px;
  21.     background-color: #fff;
  22.     border-radius: 50px;
  23.     display: flex;
  24.     overflow: hidden;/*起到:规定子容器不能超出,能保持父类圆角效果*/
  25.     align-items: flex-start;/* */
  26. }
  27. .speed-bar{
  28.     width: 100%;
  29.     height: 16.3%;
  30.     background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%);    /*设置渐变色样式*/
  31.     display: flex;              /*使得容器可以设置接下来两个样式*/
  32.     justify-content: center;
  33.     align-items: center;
  34.     color: #fff;
  35.     cursor: pointer;
  36. }
复制代码
HTML处的排版实在中规中矩,只是设置了一个用于包装的id选择器,然后通过video标签利用H5自带的视频播放功能,可以通过更改src来更改播放的视频。
css处的话各人只要注意弹性盒子的利用,通过弹性容器设置了视频的程度垂直居中
2.JS实现功能
代码如下(示例):
  1. //1.拿到要操作的dom结构
  2. //2.取到鼠标在该dom上滑动的距离
  3. //3.改变该dom的高度
  4. //4.改变视频的播放速度
  5. //获取对应的dom结构
  6. var speed=document.querySelector('.speed')//补充:getElementsByClassName   都是获取class选择器
  7. var bar=document.querySelector('.speed-bar')
  8. var video=document.querySelector('.flex')
  9. speed.addEventListener('mousemove',function(e){     //简单来说就是指向了当前发生的事件(click、mouseover等等),保存了当前事件的信息。如鼠标点击事件,有鼠标的坐标信息。
  10.     //console.log(e);
  11.     var y=e.pageY-speed.offsetTop           //鼠标在右侧容器中的距离        offsetTop是获取某个dom结构到浏览器顶部的距离
  12.     var percent = y / speed.offsetHeight    //offsetHeight是获取某个dom结构自身的高度
  13.     var min = 0.4           //设置倍速极限
  14.     var max = 4
  15.     var playbackRate = percent * (max-min)+min      //倍速计算
  16.     var height = Math.round(percent * 100)+'%'//Math.abs()   也是取绝对值
  17.     bar.textContent = playbackRate.toFixed(2)+'×'           //改变dom里面的文本内容    toFixed(x)  保留x位小数
  18.     video.playbackRate = playbackRate       //调整video的播放倍速
  19.     bar.style.height = height       //调整倍数文本的显示高度
  20. })
  21. //注:函数的俩参数作用分别为:监听鼠标点击事件       函数里面定义函数,成为回调函数
复制代码
重点在于s处实现控制功能,在编写Js版块时,我们应该明白自己要Js帮我们干什么
1.拿到要利用的dom布局
2.取到鼠标在该dom上滑动的间隔
3.改变该dom的高度
4.改变视频的播放速率
有了目的,我们就一个一个去实现它
具体实现可以直接看原码,这里重点提一下回调函数和鼠标控制倍速原理。可以看到
speed.addEventListener( " mousemove " ,function(e){)
这是个回调函数,当mousemove发生的时间就会执行函数function (e) tmousemove则是起到监听鼠标位置的作用
到此这篇关于通过JS来实现简单控制视频播放倍速的文章就先容到这了,更多相干js视频播放倍速内容请搜刮草根技术分享从前的文章或继承欣赏下面的相干文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作