1、第一步:准备一个mp4的视频文件
2、第二步: 把视频文件放到assets文件夹下
3、书写代码:首先定义样式居中,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个简单的视频提速网页</title>
</head>
<style>
.header {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
video {
margin-top: 50px;
}
</style>
<body>
<div class="header">
<video src="../mp4/5999e6a2ba70bfa863da83c0c6d0189a.mp4"></video>
</div>
</body>
</html>
4、结合video的简单属性去写
4.1 现在先添加视频就绪自动标签
4.2 写了这个属性muted也能够自动播放,chrome添加就支持自动播放了
4.3 添加显示播放控件
4.4 设置无限循环
5、参考对照项目,现在添加倍速
6、倍速整理资料,现在我想要将倍速提升到这些,3px 5px 15px 20px 50px
7、先整理资料吧!!!
在现代化的网站中,视频播放已经成为了不可或缺的一部分。而对于视频播放的需求也越来越多样化,比如倍速播放、调节声音、拖动进度条、生成智能字幕等。本文将介绍如何使用Vue实现这些功能:
8、Vue实现个人网盘视频存储界面_vue 网盘-CSDN博客,这个大佬的写的真的很好
html中video标签使用几常见问题-CSDN博客,这位大佬写的也真的很好
9、JS设置视频播放速度,加速网课视频小技巧
9.1 本文转载于:JS设置视频播放速度,加速网课视频小技巧_网页视频加速代码-CSDN博客
document.querySelector('video').playbackRate = 5;
进入到要加速的视频页面按F12打开控制控制台输入代码并回车
document.getElementsByTagName("video")[0].playbackRate = 5;
10、调整video的播放速率
有时候,自己在看视频的时候,给你调节的速率往往就是0.5,1,1.5,2倍,有时候不是自己想要的速度,例如看日剧,1.5像是正常播放速度,2倍速又太快,那么,1.75左右才算是刚刚好,所以就来自己设置一下吧,只需要两行代码。
下面以我看的的一个网站为例举例一下。
1.打开开发者工具,找到video标签的class或者id
2、控制条输入这两行代码
var video = document.querySelector(".dplayer-video-current");
video.playbackRate = 1.75
11、自己弄一个网页试试:这个大佬也很厉害,里面有很多可以可以参考的资料
哔哩哔哩 B站 bilibili 视频倍速设置 视频倍速可自定义_谷歌allow pasting-CSDN博客
12、下一步,把加速的代码输入到这里:
document.querySelector('video').playbackRate = 2.5