自定义按钮操作Video播放视频

最新推荐文章于 2025-08-06 16:05:15 发布
原创 最新推荐文章于 2025-08-06 16:05:15 发布 · 1.1w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#video #pause #play

本文介绍了一种使用JavaScript实现的基本视频播放控制功能，包括播放/暂停及快进快退操作。通过对HTML5 video元素的控制，实现了简洁有效的用户交互。
 function playPause() {
        var myVideo = document.getElementsByTagName('video')[0];
        if (myVideo.paused) {
            myVideo.play();
        }
        else {
            myVideo.pause();
        }
    }


    function speedBackward(type) {
        var myVideo = document.getElementsByTagName('video')[0];
        if (type === 1) {
            myVideo.currentTime = (myVideo.currentTime + 10) < myVideo.duration ? myVideo.currentTime + 10 : myVideo.duration;
        }
        else {
            myVideo.currentTime = (myVideo.currentTime - 10) > 0 ? (myVideo.currentTime - 10) : 0;
        }
        myVideo.play();
    }
微信小程序spu商品界面前端视频播放 点击自定义播放按钮让他播放原来的video进度
qq_35915504的博客
07-14 371
通过这些修改，当用户点击自定义播放按钮时，视频将从上一次播放的位置继续播放，而不是每次都从头开始。如果你想让视频从上一次播放的位置继续播放，而不是每次都从头开始，你可以在页面的。函数中，我们不再将视频的当前播放时间设置为 0，而是设置为。中添加一个变量来存储视频的当前播放位置，然后在。函数中使用这个位置来设置视频的播放进度。最后，我们需要在视频播放过程中不断更新。然后，在 JavaScript 中添加。函数中，我们将视频的当前播放时间。中添加一个新的变量，例如。，也就是上一次播放的位置。
网课视频禁止倍速和快进
青语的博客
06-02 4万+
前提 视频通过video原生组件播放，可以通过查看元素标签确定。 倍速播放 据说倍速设置在16倍一下不容易被监测到 document.querySelector('video').playbackRate = 8.0; 视频快进或跳转 duration表示结束时间，可以跳转到视频结束的最后几秒。让视频自动播放完成。 let video = document.getElementsByTagName('video') for (let i=0; i<video.length; i++) {
快速播放完，视频，适用于 一些教育视频的听课，如财务继续教育、驾校考试等
Kaizen的博客
12-07 5045
在浏览器的控制台录入如下代码 document.querySelector(‘video’).play();document.querySelector(‘video’).playbackRate = 10.0; //修改此值设置当前的播放倍数。这个可以十倍速度快速听完。 倍速最大值是有规定的，或者说function skip() { let video = document.getElementsByTagName(‘video’) //获取网页中所有视频播放 } setInterval(skip,20
网页视频倍速
AI小小怪的博客
09-01 2万+
打开视频播放页，按F12，找到控制台（Console）在控制台里面粘贴以下代码（其中之一即可），按回车。可根据自己的需求调节数值大小。
网页视频进度条禁止拖动----解决
热门推荐
weixin_46435234的博客
03-06 9万+
点击键盘F12键，进入开发者模式 发现标志,html5播放器，属于原生支持最方便实现加速的 在开发者模式中找到Console 调式窗口，输入以下代码 可以设置视频播放速度 /* play video twice as fast */ document.querySelector('video').defaultPlaybackRate = 1.0;//默认一倍速播放 document.querySelector('video').play(); /* now play three times as.
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
总的来说，微信小程序中的`<video>`组件提供了丰富的自定义能力，允许开发者根据自己的需求定制视频播放界面，包括自定义播放按钮、封面图以及在封面上添加文案。通过合理的布局和事件监听，我们可以构建出符合用户...
html5自定义video标签的海报与播放按钮功能
11-21
2.div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原比例显示在div内 css: .yourDiv{ background-color: black; height:20em; background-image: url...
精选资源
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
01-21
产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...
如何解决网页视频课程进度条禁止拖动？
zhangrelay的专栏
08-06 6638
本文介绍了多种解除网页视频进度条限制的技术方案，包括：1. 浏览器开发者工具法（修改video元素属性、移除限制）；2. 扩展插件法（使用GlobalSpeedController等加速播放）；3. HTML/CSS修改法；4. 脚本注入法（Tampermonkey脚本）；5. 视频加速法。同时强调这些方法应合法合规使用，避免侵犯版权或违反平台规定，并提醒不同网站机制差异可能导致方案失效，频繁操作可能引发账号风险。
通过加速或跳过网页视频解决进度条无法拖动问题
CKeon的博客
10-10 4万+
部分网页视频加速或跳过解决方法
javascript中DOM总结（二）
weixin_47450807的博客
03-08 357
javascript中DOM总结（二） 使用Nodelist NodeList，和HTMLColletion,以及NamedNodeMap是实时的。所以下面的循环是无限循环 let div = document.getElementsByTagName("div"); for(let i =0;i<div.length;i++){ let ele = document.createElement("div"); ele.appendChild(document.crea
视频进度条不能拖动，无法快进，js脚本
你长的真帅大佬，不妨动动小手点赞加关注
11-03 2770
let video = document.getElementsByTagName('video') for (let i=0; i<video.length; i++) { video[i].currentTime = video[i].duration }
时间以同样的方式流经每个人，而每个人却以不同的方式度过时间
AcceptedLin的博客
04-27 5213
时间以同样的方式流经每个人，而每个人却以不同的方式度过时间 看到这篇文章，恭喜你找到一个减少无效时间消耗的工具，同时，也祝你：能够用喜欢的方式过一生。 下面开始表演： 通常，有些时候无论出于什么原因，要被迫主动刷一些网课。刷就刷好了，还不能快进，不能快进就罢了，还不能同时播放多个，是不是有点耍流氓？ 所谓魔高一尺，道高一丈。淦就完了。 左手代码，右手写诗。 ...
fixed-视频倍速
weixin_44195250的博客
07-31 408
数字3 就是多少倍速 可以替换想要的倍速。然后进入console控制台。首先fn12打开开发者模式。
多个video只播放一个
kilito_01的博客
09-22 524
多个video只播放一个
Js:document.getElementsByTagName()集合应用范例
weixin_30826761的博客
07-18 898
<body><script>function checkAll(){var obj_all = document.getElementsByTagName("INPUT");for(i=0;i<obj_all.length;i++)if(obj_all[i].type=="checkbox")obj_all[i].checked = true;}</script...
Typecho 引入 DPlayer
blog.jichun29.cn
03-11 466
想在文章中插入视频，尝试 iframe 和 video 标签后发现 m3u8 流会触发下载无法播放，用 hls 该问题后，碰到了 403 forbbiden。联想到前些天新浪图床加 referrer 的解决方法，随手一试竟然可以。后来发现 Mixed Content 和 CORS 才是大坑，几经了解，这个问题只能靠视频源服务器解决，所以把视频放在自己的服务器或 CDN 是不会有问题的。最后，用 js 封装了一下神器 DPlayer，使用体验良好。
JS 淘宝打分: document.getElementsByTagName()
weixin_50784508的博客
06-09 216
【代码】JS 淘宝打分: document.getElementsByTagName()
html video自定义播放按钮
最新发布
08-20
在HTML中为`<video>`元素自定义播放按钮，通常涉及隐藏默认的浏览器控件，并使用HTML、CSS和JavaScript构建一个自定义的用户界面。通过这种方式，开发者可以完全控制播放按钮的外观和行为。 以下是一个实现自定义播放按钮的示例： ### HTML结构 ```html <div class="video-container"> <video id="myVideo" src="your-video-file.mp4"></video> <button id="playButton">▶ Play</button> </div> ``` 在这个结构中，`<video>`标签的`controls`属性被移除，以隐藏默认控件。一个自定义的`<button>`被添加，用于控制视频的播放与暂停。 ### CSS样式 可以通过CSS为播放按钮设计样式，使其在视频上方显示，并具备交互反馈： ```css .video-container { position: relative; max-width: 600px; } #myVideo { width: 100%; display: block; } #playButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: rgba(0, 0, 0, 0.7); color: white; border: none; border-radius: 5px; } ``` 此样式将按钮居中显示在视频上方，并为其添加了基本的视觉反馈。 ### JavaScript控制 使用JavaScript来绑定点击事件，以控制视频的播放和暂停状态： ```javascript document.getElementById('playButton').addEventListener('click', function () { var video = document.getElementById('myVideo'); if (video.paused) { video.play(); this.textContent = '❚❚ Pause'; } else { video.pause(); this.textContent = '▶ Play'; } }); ``` 此脚本根据视频的当前状态切换播放和暂停功能，并更新按钮的文本内容以反映当前状态。 通过上述方法，可以实现一个功能齐全且样式可定制的播放按钮，从而增强用户体验并使视频播放控件更符合网站的整体设计风格[^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值