How to control the video playback speed in HTML5? How to achieve full screen of video in HTML5?

In HTML5, the playback speed of video can be controlled through the playbackRate attribute, which accepts the following values: less than 1: slow playback equals 1: normal speed playback greater than 1: fast playback equals 0: pause In HTML5, the video full screen can be realized through the requestFullscreen() method, which can be applied to a video element or its parent element.

How to control the video playback speed in HTML5?

In HTML5, the playback speed of the video can be controlled through playbackRate property. This property accepts a value less than or equal to 0, where:

• 1 is the normal speed
• for slow playback
• > 1 for quick playback
• 0 is pause

Sample code:

 <code class="html"><video id="myVideo"> <source src="video.mp4"> </source></video> <script> // 慢速播放document.getElementById("myVideo").playbackRate = 0.5; // 正常速度播放document.getElementById("myVideo").playbackRate = 1; // 快速播放document.getElementById("myVideo").playbackRate = 2; </script></code>

How to achieve full screen of video in HTML5?

In HTML5, you can use requestFullscreen() method to achieve full screen of video. This method can be applied to a video element or its parent element.

Sample code:

Video elements:

 <code class="html"><video id="myVideo"> <source src="video.mp4"> </source></video> <script> document.getElementById("myVideo").requestFullscreen(); </script></code>

Parent element:

 <code class="html"><div id="videoContainer"> <video id="myVideo"> <source src="video.mp4"> </source></video> </div> <script> document.getElementById("videoContainer").requestFullscreen(); </script></code>

After calling requestFullscreen() method, the video will enter full screen mode. To exit full screen mode, press the Esc key or call exitFullscreen() method.

The above is the detailed content of How to control the video playback speed in HTML5? How to achieve full screen of video in HTML5?. For more information, please follow other related articles on the PHP Chinese website!