html5 实现视频播放

常用属性

  • controls: 显示默认的播放控制条。
  • autoplay: 页面加载时自动播放视频。
  • loop: 视频播放结束后自动重新播放。
  • muted: 静音播放视频。
  • poster: 在视频加载前显示的预览图。

例子:

html 复制代码
<video src="my_video_file.mp4" controls autoplay loop muted poster="review.jpg"></video>

一、实现视频循环播放:

loop属性确保视频循环播放

autoplay属性使视频在页面加载时自动播放

muted属性则静音播放,避免自动播放视频时的声音干扰

html 复制代码
<video class="video_box" loop autoplay muted>
	<source src="my_video_file.mp4" type="video/mp4">
	<span>This video browser does not support</span>
</video>

二、使用JavaScript控制视频播放

1、通过监听视频的ended事件,在视频播放结束时重新播放

html 复制代码
<video id="myVideo">
	<source src="my_video_file.mp4" type="video/mp4">
	<span>This video browser does not support</span>
</video>
<script>
	const myVideo = document.getElementById('myVideo');
	myVideo.addEventListener('ended', () => {
	  myVideo.play();
	});
</script>

2、通过检查视频的currentTime属性,实现更精细的控制

html 复制代码
<video id="myVideo">
	<source src="my_video_file.mp4" type="video/mp4">
	<span>This video browser does not support</span>
</video>
<script>
	const myVideo = document.getElementById('myVideo');
	myVideo.addEventListener('timeupdate', () => {
		if (myVideo.currentTime >= myVideo.duration - 0.2) {
			myVideo.currentTime = 0;
			myVideo.play();
		}
	});
</script>

三、css动画加JavaScript控制视频效果

html 复制代码
<style>
	.video_fade_in {animation: fadeIn 2s;}
	.video_fade_out {animation: fadeOut 2s;}
	@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}	
	@keyframes fadeOut {from { opacity: 1; }to { opacity: 0; }}
</style>
<video class="video_fade_in">
	<source src="my_video_file.mp4" type="video/mp4">
	<span>This video browser does not support</span>
</video>
<video id="myVideo" class="video_fade_out">
	<source src="my_video_file.mp4" type="video/mp4">
	<span>This video browser does not support</span>
</video>
<!-- 在视频播放结束后淡入淡出 -->
<script>
	const myVideo = document.getElementById('myVideo');
	myVideo.addEventListener('ended', () => {
	  myVideo.classList.add('video_fade_out');
	  setTimeout(() => {
	    myVideo.classList.remove('video_fade_out');
	    myVideo.currentTime = 0;
	    myVideo.play();
	  }, 2000);
	});
</script>
相关推荐
山登绝顶我为峰 3(^v^)336 分钟前
如何录制带备注的演示文稿(LaTex Beamer + Pympress)
c++·线性代数·算法·计算机·密码学·音视频·latex
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
却道天凉_好个秋6 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html