html中引入视频的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了html中引入视频的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一：video标签

用于在html元素中添加视频元素

<video controls >
     <source src="视频路径" type="video/视频格式">
</video>

我引入视频就是使用这个标签，但是我使用视频的的属性并不多，只是使用了简单的播放暂停，至于其他的属性可能现在没有怎么使用，以后需要继续用一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="videoBtn" style="max-width:500px;">
        <video controls="false"  muted="muted" id="video1" name="media" style="width:500px; height: 200px;">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        </video>
    </div>
    <script>
        var myVideo = document.getElementById("video1");
        var videoBtn = document.getElementById("videoBtn");
        myVideo.loop = true
        videoBtn.onmouseleave = function () {
            myVideo.pause();
        }
        videoBtn.onmousemove = function () {
            myVideo.play();
        }
        function getVideoTime() {
            if (document.getElementById('video1')) {
                let videoPlayer = document.getElementById('video1');
                videoPlayer.addEventListener('timeupdate', function () {
                    console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是${videoPlayer.duration}`);
                    if (videoPlayer.currentTime > 11) {
                        myVideo.pause();
                        videoPlayer.currentTime = 0
                    }
                }, false)
            }
        }
        getVideoTime();
    </script>
</body>

</html>

至于我使用的时候有个时间点，和视频长度，本来就是想着这个属性是不是能用来做那个视频的播放条那个东西。controls 属性设置或返回浏览器应当显示标准的视频控件（播放，暂停，进度条，音量，全屏切换，字幕，轨道）。true-指定显示控件，false-指定不显示。

方法二：embed标签

用于在html元素中嵌入多媒体元素