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

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

方法一：video标签

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

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

<!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>