在本文中,我们将了解如何使用 HTML5 视频标签来改变视频的播放速度 嵌入在 HTML 文档中。
小于 1 的数字会减慢视频速度,大于 1 的数字会加速视频,然后 数字 1 会使视频恢复到原来的速度。另请注意,playbackRate 是一个属性 而不是 HTML 属性。
尽管您不想更改每个视频网站的播放速率,但如果您愿意,也可以这样做 认为您的访客会更喜欢它。这只需要一个 HTML 元素设置!
PlaybackRate 属性允许我们更改播放速度。这些是它的语法规则。
let video = document.querySelector('video') video.playbackRate = newPlaybackRate
通过使用defaultPlaybackRate参数,用户可以轻松修改默认播放速度。它 使用下面列出的语法。
let video = document.querySelector('video') video.defaultPlaybackRate = 4 video.load()
<!DOCTYPE html> <html> <title>How to change video playing speed using JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> body { text-align: center; margin-top: 5%; } h1 { color: rgb(3, 95, 121); } p { margin-top: 5%; } button { margin-right: 20px; } </style> </head> <body> <h1>TutorialsPoint Sample Video</h1><br> <video width="420" height="240" controls loop> <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4"> The video tag is incompatible with your browser. </video> <p> <button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button> <button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button> </p> <script> let video = document.querySelector('video'); // Make the playing speed the default video.defaultPlaybackRate = 0.5 // The video is loaded after setting video.load(); function speedUp() { // The playback speed has been increased by 1 video.playbackRate += 1; } function speedDown() { // The playback speed has been decreased by 1 if (video.playbackRate > 1) video.playbackRate -= 1; } </script> </body> </html>
音频或视频的播放速度通过playbackRate属性设置或返回。
价值 | 描述 |
---|---|
播放速度 | 显示音频或视频的速度 当前正在播放。 情况值的类型 -
|
播放速度是多少?
媒体根据playbackRate 属性以定义的速率播放。有了这个,用户 实现了快进、慢动作和其他功能的控制。值为 1.0 表示 标准速度,通过将当前速率乘以通常的播放速率来计算。
什么播放速度是完美的?
大多数浏览器会在播放之外暂停音频 视频的速率限制为 0.5 和 4 播放无声。对于大多数情况,您应该将范围保持在 0.5 到 4 之间 应用程序。
<!DOCTYPE html> <html> <title>How to change video playing speed using JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> body { text-align: center; margin-top: 5%; } h1 { color: rgb(3, 95, 121); } button { margin-top: 20px; } </style> </head> <body> <h1>TutorialsPoint Sample Video</h1><br> <video id="myVideo" width="420" height="240" controls> <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4"> HTML5 video is not compatible with your browser. </video> <br> <button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button> <button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br> <script> let demoVideo = document.getElementById("myVideo"); function getSpeed() { alert(demoVideo.playbackRate); } function setSpeed() { demoVideo.playbackRate = 0.5; } </script> </body> </html>
点击“获取播放频率”按钮后,您将看到以下屏幕。
此外,单击“慢动作视频”按钮,然后单击“获取”后,您将在屏幕下方看到他 播放频率”按钮。
在上面的示例中,变量(本例中为 demoVideo)用于更改播放速度(或 任何我们想做的事情)。例如,只需输入 demoVideo 并将playbackRate 更改为 2 以两倍的速度跑步。 playbackRate 等于 2。
所有这一切的结论。当您按下“播放”时,该视频的播放速度将是原来的两倍 通常。您喜欢它以半速运行吗?相反,将playbackRate 设置为0.5。想让它恢复 以正常速度运行?基本上,将playbackRate 设置为1。
以上就是如何使用 JavaScript 改变视频播放速度?的详细内容,更多请关注php中文网其它相关文章!
已抢187108个
抢已抢67505个
抢已抢353787个
抢已抢668488个
抢已抢123912个
抢已抢26114个
抢