首页 前端知识 HTML一个简单的视频提速写法构思

HTML一个简单的视频提速写法构思

2024-02-26 20:02:09 前端知识 前端哥 595 562 我要收藏

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

13、绑定速率

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2733.html
标签
音视频
评论
会员中心 联系我 留言建议 回顶部
复制成功!