方法一: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元素中嵌入多媒体元素

<embed src="视频路径" />

方法三:object标签

同方法二一样在html中嵌入多媒体元素

<object data="视频地址"/>

方法二和方法三是不常用的。

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐