Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > body text

The method load() to reload audio/video elements in html5

黄舟
Release： 2017-11-07 11:27:15
Original
8152 people have browsed it

Example

Change the videosource and reload the video: 

document.getElementById("mp4_src").src="movie.mp4";
document.getElementById("ogg_src").src="movie.ogg";
document.getElementById("video1").load();
Copy after login

Definition and usage

load() Method to reload the audio/video element. The

load() method is used to update the audio/video element after changing the source or other settings.

Browser support

All major browsers support the load() method, except Safari.

Note: Internet Explorer 8 and earlier versions do not support this method.

Grammar

audio|video.load()
Copy after login

Example:

<!DOCTYPE html> 
<html> 
<body> 
<video id="video1" width="480" height="270" controls="controls">
 <source id="mp4_src" src="material/sample.mp4" type="video/mp4"/>    
 <source id="ogg_src" src="material/sample.ogv" type="video/ogg"/>
你的浏览器不支持HTML5 video.
</video>
<p>点击“切换视频”按钮，加载新的视频</p>

<button onclick="myFunction()">切换视频</button>
<script>
var vid = document.getElementById("video1");
function myFunction()  {
   document.getElementById("mp4_src").src = "material/sample2.mp4";
   document.getElementById("ogg_src").src = "material/sample2.ogv";
document.getElementById("video1").load();
}
</script> 
</body> 
</html>
Copy after login


The above is the detailed content of The method load() to reload audio/video elements in html5. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
h5 html5 video
source：php.cn
Previous article：The method canPlayType() in HTML5 determines whether the browser can play the specified audio/video type. Next article：How to start playing the current audio or video in html5
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
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template