当前位置：首页 > article >正文

HTML5 Video标签的属性、方法和事件汇总，以及常用视频插件推荐

article 2024/11/15 8:59:29

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：HTML5与CSS3 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

HTML5 <video> 标签是一个用来嵌入视频内容的标签，它有一系列的属性用于控制视频的播放、显示和交互。以下是一些常用的属性和事件：

常用属性：

src: 定义视频的URL。

<video src="myVideo.mp4"></video>

poster: 设置视频尚未加载或播放时显示的图像URL。

<video src="myVideo.mp4" poster="thumbnail.jpg"></video>

preload: 控制视频数据的加载策略，可以是 "auto"（默认，根据浏览器决定）、"metadata"（只加载元数据，如长度）或 "none"（不预先加载）。

<video src="myVideo.mp4" preload="auto"></video>

autoplay: 规定视频是否应该在就绪后立即自动播放。

<video src="myVideo.mp4" autoplay></video>

controls: 是否显示浏览器自带的播放控制（如播放/暂停按钮、进度条等）。

<video src="myVideo.mp4" controls></video>

loop: 规定视频是否应在结束时重新开始播放。

<video src="myVideo.mp4" loop></video>

width 和 height: 设置视频播放器的宽度和高度。

<video src="myVideo.mp4" width="320" height="240"></video>

muted: 规定视频是否静音播放。

<video src="myVideo.mp4" muted></video>

常用方法

HTML5 <video> 元素作为一个JavaScript可操作的对象，拥有许多方法来控制视频播放行为。以下是其中的一些常用方法：

play()：

开始播放或继续播放视频。如果视频已经处于播放状态，则此方法无效。

var myVideo = document.querySelector('video');
myVideo.play();

pause()：

暂停视频播放。

myVideo.pause();

load()：

重新加载视频源或初始化当前选定的来源。这会清除任何现有播放位置或错误状态。

myVideo.load();

currentTime 属性（读写）：

读取或设置视频播放的当前时间（单位为秒）。

// 获取当前播放位置 
var currentPos = myVideo.currentTime; 
// 设置新的播放位置 
myVideo.currentTime = 30; // 秒数

duration 属性（只读）：

返回视频的总时长（若已知）。

var totalDuration = myVideo.duration;

1. paused 属性（只读）：

返回一个布尔值，表示视频是否处于暂停状态。

var isPaused = myVideo.paused;

volume 属性（读写）：

设置或获取视频音量（范围0.0-1.0）。

// 设置音量 
myVideo.volume = 0.5; 
// 获取音量 
var volumeLevel = myVideo.volume;

mute() 和 unmute()：

静音和取消静音视频。

myVideo.mute(); // 静音
myVideo.unmute(); // 取消静音

requestFullscreen()：

请求视频进入全屏模式（需兼容不同浏览器的API，如 mozRequestFullScreen, webkitRequestFullscreen 等）。

if (myVideo.requestFullscreen) {  
 myVideo.requestFullscreen(); 
} else if (myVideo.mozRequestFullScreen) { /* Firefox */  
 myVideo.mozRequestFullScreen(); 
} else if (myVideo.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ 
  myVideo.webkitRequestFullscreen(); 
}

addEventListener()：

用于监听视频相关的事件，如前面提及的 play, pause, ended 等。

myVideo.addEventListener('ended', function() { console.log('Video has ended.'); });

这些方法和属性共同构成了对HTML5 <video> 元素的基本控制，使开发者能够实现诸如播放控制、音量调节、播放位置定位、全屏切换等各种功能。

常用事件：

loadstart: 视频加载开始时触发。

var vid = document.querySelector('video'); 
vid.addEventListener('loadstart', function() { console.log('Loading started...'); });

progress: 视频数据正在加载过程中持续触发。

vid.addEventListener('progress', function() { console.log('Data is loading...'); });

loadeddata: 第一帧数据已加载完毕，此时视频可以开始播放，但不一定所有数据都已加载。

vid.addEventListener('loadeddata', function() { console.log('First frame is loaded.'); });

canplay: 当前可用数据足以开始播放，但不保证流畅播放至结尾。

vid.addEventListener('canplay', function() { console.log('Ready to play.'); });

canplaythrough: 预计有足够的数据可以流畅播放至视频结尾。

vid.addEventListener('canplaythrough', function() { console.log('Can play the video through without buffering issues.'); });

play: 视频开始或恢复播放时触发。

vid.addEventListener('play', function() { console.log('Video is playing.'); });

pause: 视频暂停时触发。

vid.addEventListener('pause', function() { console.log('Video is paused.'); });

ended: 视频播放完毕时触发。

vid.addEventListener('ended', function() { console.log('Video has ended.'); });

timeupdate: 当视频播放位置发生变化时持续触发，常用于实时更新进度条。

vid.addEventListener('timeupdate', function() { var currentTime = vid.currentTime; console.log('Current time:', currentTime); });

error: 当视频加载或播放发生错误时触发。

vid.addEventListener('error', function(event) { console.error('An error occurred:', event.target.error); });

以上是一些常见的 <video> 标签属性和事件，它们可以帮助开发者更好地控制视频内容的展现和交互行为。

常用视频插件推荐

虽然HTML5 视频播放并不需要外部库就能在大部分现代浏览器中直接使用，但是为了更好的兼容和扩展，有几个不错的视频插件推荐给大家

Video.js: Video.js 是一个非常流行的开源 HTML5 视频播放器框架，它可以优雅地降级到 Flash 并提供一致的 UI 体验，易于自定义皮肤和扩展功能。官网：https://videojs.com/

Plyr : Plyr 是一个简洁、轻量级的 HTML5 视频和音频播放器，它支持自定义样式并且在各个浏览器之间提供了优秀的兼容性和一致性。官网：https://plyr.io/

Clappr: Clappr 是一个可扩展且易于使用的视频播放器，支持 HLS、MP4 和 Dash 流媒体协议。官网：https://github.com/clappr/clappr

HLS.js: 如果你需要播放 HLS（HTTP Live Streaming）流媒体，HLS.js 是一个纯 JavaScript 的 HLS 解析器和播放器，可以在不支持原生 HLS 的浏览器上播放 HLS 流。官网：https://github.com/video-dev/hls.js

每个库都有各自的特点和优势，可以根据项目需求来选择合适的视频播放库。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战