blocks|key|1009842|text|根据this+site的说法，这在playbackRate和defaultPlaybackRate属性中受支持，可通过DOM访问。示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1009843|/*+play+video+twice+as+fast+*/
document.querySelector('video').defaultPlaybackRate+=+2.0;
document.querySelector('video').play();

/*+now+play+three+times+as+fast+just+for+the+heck+of+it+*/
document.querySelector('video').playbackRate+=+3.0;|code-block|syntax|javascript|1009844|上面的works在Chrome+43%2B，火狐20%2B，IE+9%2B，Edge+12%2B上。|1009845|entityMap|0|LINK|mutability|MUTABLE|url|http://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events/|1|https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate^0|H|C|U|J|2|9|0|0|0|3|5|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

According to <a href="http://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events/" rel="noreferrer">this site</a>, this is supported in the <code>playbackRate</code> and <code>defaultPlaybackRate</code> attributes, accessible via the DOM. Example:

<pre><code>/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();

/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
</code></pre>

The above <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate" rel="noreferrer">works</a> on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.

blocks|key|1224355|text|只需输入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224356|document.querySelector('video').playbackRate+=+1.25;|code-block|syntax|javascript|1224357|在您现代浏览器的JS控制台中。|1224358|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Just type

<pre><code>document.querySelector('video').playbackRate = 1.25;
</code></pre>

in JS console of your modern browser.

blocks|key|1010202|text|在chrome中，创建一个新的书签|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010203|📷|atomic|offset|length|1010204|​|1010205|输入任意名称，例如速度选择器，然后在URL中输入以下代码|1010206|javascript：|1010207|var+speed+=+prompt("Please+enter+speed",+"1");
document.querySelector('video').playbackRate+=+speed,void(0);|code-block|syntax|javascript|1010208|然后，当您单击此书签时，将出现一个弹出窗口，您可以在其中输入视频的速度|1010209|1010210|1010211|1010212|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/2c76215b514ffac847f72930fb29f3aa.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/4548c71fdc80463f5a757f9c0513f1c8.png^0|0|0|1|0|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@$E|19|F|1A|1|1B]]|A|$]]|$1|G|3|H|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1F|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|H|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|C|5|D|7|1I|8|@]|9|@$E|1J|F|1K|1|1L]]|A|$]]|$1|V|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]|15|$5|Z|10|11|A|$12|16|14|-4]]]]

In chrome, create a new bookmark
<a href="https://i.stack.imgur.com/1a1YW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1a1YW.png" alt="enter image description here" /></a>
Enter an arbitarary name for example speed selector then Enter the following code in the URL
javascript:
<pre><code>var speed = prompt(&quot;Please enter speed&quot;, &quot;1&quot;);
document.querySelector('video').playbackRate = speed,void(0);
</code></pre>
then when you click on this bookmark, a popup window appears then you can enter the speed of video
<a href="https://i.stack.imgur.com/yW9e2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yW9e2.png" alt="enter image description here" /></a>

blocks|key|1009957|text|javascript:document.getElementsByClassName("video-stream+html5-main-video")[0].playbackRate+=+0.1;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1009958|你可以在这里输入任何数字，只是不要太远，这样你就不会使你的计算机超载。|unstyled|1009959|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;
</code></pre>

you can put any number here just don't go to far so you don't overun your computer.

blocks|key|1009965|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1009966|var+vid+=+document.getElementById("video1");

function+slowPlaySpeed()+{+
++++vid.playbackRate+=+0.5;
}+

function+normalPlaySpeed()+{+
++++vid.playbackRate+=+1;
}+

function+fastPlaySpeed()+{+
++++vid.playbackRate+=+2;
}|code-block|syntax|javascript|1009967|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use this code:

<pre><code>var vid = document.getElementById("video1");

function slowPlaySpeed() { 
 vid.playbackRate = 0.5;
} 

function normalPlaySpeed() { 
 vid.playbackRate = 1;
} 

function fastPlaySpeed() { 
 vid.playbackRate = 2;
}
</code></pre>

blocks|key|1224495|text|假设你的视频/音频id是myVideo，那么你可以简单地使用JavaScript来做你想做的事情，只需输入以下简单的JS代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1224496|var+vid+=+document.getElementById("myVideo");
vid.playbackRate+=+0.5;`|code-block|syntax|javascript|1224497|这会将视频/音频的速度降低到一半的速度。|1224498|回放速度|1224499|音视频的当前播放速度。|1224500|示例取值：|1224501|1.0+is+normal+speed|1224502|0.5+is+half+speed+(slower)|1224503|2.0+is+double+speed+(faster)|1224504|-1.0+is+backwards,+normal+speed|1224505|-0.5+is+backwards,+half+speed|1224506|来源：w3schools.com|1224507|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/tags/av_prop_playbackrate.asp^0|C|7|0|0|0|0|0|0|0|J|0|0|Q|0|0|S|0|0|V|0|0|T|0|3|D|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1G|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1H|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|12|3|13|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|14|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B]]]]

suppose that your video/audio id is <code>myVideo</code>, then you can simply use JavaScript for doing that you wanna do, By just typing the following simple JS code:-
<pre><code>var vid = document.getElementById(&quot;myVideo&quot;);
vid.playbackRate = 0.5;`
</code></pre>
That will decrease the speed of your video/audio to it's half speed.
<h3>playbackspeed</h3>
Indicates the current playback speed of the audio/video.
Example values:
<code>1.0 is normal speed</code>
<code>0.5 is half speed (slower)</code>
<code>2.0 is double speed (faster)</code>
<code>-1.0 is backwards, normal speed</code>
<code>-0.5 is backwards, half speed</code>
<h3>source: <a href="https://www.w3schools.com/tags/av_prop_playbackrate.asp" rel="nofollow noreferrer">w3schools.com</a></h3>

blocks|key|1010262|text|我更喜欢对视频速度进行更微调的方法。我喜欢能够根据命令加快和放慢视频的速度。因此，我使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010263|window.addEventListener("keypress",+function(e)+{
++if(e.key==="d")+document.getElementsByTagName("video")[0].playbackRate+%2B=+.1;+else+if(e.key==="s")+document.getElementsByTagName("video")[0].playbackRate+-=+.1;
},+false);|code-block|syntax|javascript|1010264|按d加速，按s减速。|1010265|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I prefer having a more fine tuned approach for video speed. I like being able to speed up and slow down the video on command. Thus I use this:
<pre><code>window.addEventListener(&quot;keypress&quot;, function(e) {
 if(e.key===&quot;d&quot;) document.getElementsByTagName(&quot;video&quot;)[0].playbackRate += .1; else if(e.key===&quot;s&quot;) document.getElementsByTagName(&quot;video&quot;)[0].playbackRate -= .1;
}, false);
</code></pre>
Press d to speed up, s to slow down.

blocks|key|1010362|text|只需在浏览器的javascript控制台中键入以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010363|document.querySelector('video').playbackRate+=+2.0;|code-block|syntax|javascript|1010364|​|1010365|📷|atomic|offset|length|1010366|1010367|您可以通过从右击菜单中选择inspect选项来获取它，如下所示：|1010368|1010369|1010370|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6b0bd447ed5cefc8110bace915d4a843.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/847815d7a0d0bdcdbec6e9858b7c19f0.png^0|0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|16|8|@]|9|@$L|17|M|18|1|19]]|A|$]]|$1|N|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|J|5|K|7|1C|8|@]|9|@$L|1D|M|1E|1|1F]]|A|$]]|$1|R|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]|11|$5|V|W|X|A|$Y|12|10|-4]]]]

Just type the following command in the javascript console of your browser:
<pre><code>document.querySelector('video').playbackRate = 2.0;
</code></pre>
<a href="https://i.stack.imgur.com/GZoIa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GZoIa.png" alt="enter image description here" /></a>
You can get it by choosing the inspect option from the right-click menu as follows:
<a href="https://i.stack.imgur.com/ZQZjm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQZjm.png" alt="enter image description here" /></a>

How to change the video play speed in HTML5? I've checked <a href="https://www.w3schools.com/html/html5_video.asp" rel="noreferrer">video tag's attributes</a> in w3school but couldn't approach that.Any help would be appreciated!

How to change the playing speed of videos in HTML5?

如何在HTML5中更改视频播放速度？我已经在w3school中检查了，但无法接近that.Any，如果您能帮助我，我将不胜感激！

问如何在HTML5中改变视频的播放速度？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML5中改变视频的播放速度？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML5中改变视频的播放速度？
EN