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>
相关推荐
kymjs张涛12 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵17 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62229 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94936 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
王者鳜錸1 小时前
基于Selenium和FFmpeg的全平台短视频自动化发布系统
selenium·ffmpeg·音视频
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
aqi002 小时前
FFmpeg开发笔记(七十三)Windows给FFmpeg集成MPEG-5视频编解码器
ffmpeg·音视频·直播·流媒体
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js