HTML DOM Video load( ) Method

HTML DOM Video load( ) Method

Last Updated : 13 Mar, 2024
 

The Video load() method is used for re-loading the video element, updating it after the source or setting changes. It ensures changes take effect and the video reflects updated configurations.

Syntax:

videoObject.load()

HTML DOM Video load( ) Method Examples

Example: In this example, we display a video with two sources. When the “Change Source” button is double-clicked, it changes the video sources and reloads the video.

 
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Video load( ) Method</title>
    </head>

    <body>
        <h2>
            Video load method
        </h2>
        <br />
        <video
            id="Test_Video"
            width="360"
            height="240"
            controls
        >
            <source
                id="mp4_source"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230623105019/Untitled.mp4"
                type="video/mp4"
            />
            <source
                id="ogg_source"
                src="sample2.ogg"
                type="video/ogg"
            />
        </video>
        <p>
            To change the source of the video and
            re-load it, double click the "Change
            Source" button.
        </p>
        <br />
        <button ondblclick="My_Video()">
            Change Source
        </button>

        <script>
            function My_Video() {
                document.getElementById(
                    "mp4_source"
                ).src = "samplevideo.mp4";
                document.getElementById(
                    "ogg_source"
                ).src = "samplevideo.ogg";
                document
                    .getElementById("Test_Video")
                    .load();
            }
        </script>
    </body>
</html>
 

Output: 

Video-load-method

Video load ()method Example Output

Supported Browsers:

 

The browser is supported by HTML DOM Video load( ) Method  listed below: 

posted on   漫思  阅读(2)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2022-02-17 视区相关单位vw, vh..简介以及可实际应用场景
2022-02-17 如何让弹窗高度随着浏览器的高度走
2022-02-17 html文件上传控件file自定义样式
2022-02-17 使用includes
2022-02-17 前端必备基础知识:window.location 详解
2022-02-17 在灰度时调用不同的promise服务
2022-02-17 流媒体服务器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示