html5 property that sets or returns whether the audio/video should play again at the end of the loop-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

html5 property that sets or returns whether the audio/video should play again at the end of the loop

黄舟

Nov 09, 2017 am 09:38 AM

h5 html5 video

Example

Set the video to loop:

1 2	`myVid=document.getElementById("video1");` `myVid.loop=true;`

Copy after login

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:

1	`audio\|video.loop=true\|false`

Copy after login

Return loop attribute:

1	`audio\|video.loop`

Copy after login

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>

Copy after login

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(&#39;ended&#39;, function() {
      video.currentTime=0.1; video.play(); }, false);
      video.play();
   </script>
</body>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn