Home > Article > Web Front-end > html5 property that sets or returns whether the audio/video should play again at the end of the loop
Example
Set the video to loop:
myVid=document.getElementById("video1"); myVid.loop=true;
Definition and usage
loop PropertiesSet or returnAudio/ Whether the video should play again at the end.
Browser support
All major browsers support the loop attribute.
Note: Internet Explorer 8 or earlier browsers do not support this attribute.
Syntax
Set loop attribute:
audio|video.loop=true|false
Return loop attribute:
audio|video.loop
Attribute value
Value | Description |
true | Indicates that the audio/video should play again at the end. |
false | Default. Indicates that the audio/video should not be played again at the end. |
Return value
Type | Description |
Boolean value | true|false. The default value is false. |
Example
Set the video to loop:
<!DOCTYPE html> <html> <body> <p> <button onclick="enableLoop()" type="button">启用循环</button> <button onclick="disableLoop()" type="button">禁用循环</button> <button onclick="checkLoop()" type="button">检查循环的状态</button> </p> <video id="video1" controls="controls"> <source src="/kf51/demo/mov_bbb.mp4" type="video/mp4"> <source src="/kf51/demo/mov_bbb.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video> <script> var myVid = document.getElementById("video1"); function enableLoop() { myVid.loop = true; myVid.load(); } function disableLoop() { myVid.loop = false; myVid.load(); } function checkLoop() { alert(myVid.loop); } </script> </body> </html>
Because we need to load the HTML page in the APP, we replaced the native one with CrossWalk WebVIew found that even setting the Loop attribute on a test machine. The video (andorid4.2.2 device) will not play in a loop.
Finally, the loop attribute is no longer used and js is used to handle the loop playback. I don’t know much about HTML5, so I directly coded it
<video autoplay="autoplay" id = "video" playsinline webkit-playsinline> <source type="video/mp4" src="path" /> <preference name="AllowInlineMediaPlayback" value="true" /> </video> <script> var video = document.getElementById("video"); video.loop = false; video.addEventListener('ended', function() { video.currentTime=0.1; video.play(); }, false); video.play(); </script> </body>
webView When loading HTML, attributes such as autopaly loop may not be available. You can consider using the more powerful CrossWalk instead, but it will increase the size of the package.
We also use HTML5 to load videos for loop playback, which can avoid direct playback. A brief black screen occurs during video switching. . .
The above is the detailed content of html5 property that sets or returns whether the audio/video should play again at the end of the loop. For more information, please follow other related articles on the PHP Chinese website!