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

news2024/12/24 7:44:01

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、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可操作的对象，拥有许多方法来控制视频播放行为。以下是其中的一些常用方法：

  1. play()：
  • 开始播放或继续播放视频。如果视频已经处于播放状态，则此方法无效。
var myVideo = document.querySelector('video');
myVideo.play();
  1. pause()：
  • 暂停视频播放。
myVideo.pause();
  1. load()：
  • 重新加载视频源或初始化当前选定的来源。这会清除任何现有播放位置或错误状态。
myVideo.load();
  1. currentTime 属性（读写）：
  • 读取或设置视频播放的当前时间（单位为秒）。
// 获取当前播放位置 
var currentPos = myVideo.currentTime; 
// 设置新的播放位置 
myVideo.currentTime = 30; // 秒数
  1. duration 属性（只读）：
  • 返回视频的总时长（若已知）。
var totalDuration = myVideo.duration;

     1. paused 属性（只读）：

  • 返回一个布尔值，表示视频是否处于暂停状态。
var isPaused = myVideo.paused;
  1. volume 属性（读写）：
  • 设置或获取视频音量（范围0.0-1.0）。
// 设置音量 
myVideo.volume = 0.5; 
// 获取音量 
var volumeLevel = myVideo.volume;
  1. mute() 和 unmute()：
  • 静音和取消静音视频。
myVideo.mute(); // 静音
myVideo.unmute(); // 取消静音
  1. 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(); 
}
  1. 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入门到实战 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2158526.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PHP+uniapp微信小程序基于Android系统的旅游攻略系统cxj499

PHP+uniapp微信小程序基于Android系统的旅游攻略系统cxj499

目录 技术栈和环境说明文件解析具体实现截图php技术介绍微信开发者工具HBuilderXuniapp详细视频演示开发技术简介解决的思路性能/安全/负载方面数据访问方式PHP核心代码部分展示代码目录结构解析系统测试感恩大学老师和同学源码获取 技术栈和环境说明 本系统以PHP语言实现&…
阅读更多...
数据结构7—树（顺序存储二叉树—堆）含TOPK问题

数据结构7—树（顺序存储二叉树—堆）含TOPK问题

1.树 1.1树的概念与结构 树是一种非线性的数据结构&#xff0c;它是由 n&#xff08;n > 0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一颗倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#x…
阅读更多...
Linux 安装JDK8和卸载

Linux 安装JDK8和卸载

目录 一、下载JDK8的rpm包 二、安装JDK 三、设置环境变量 Linux环境下安装JDK的方式有多种&#xff0c;可以通过rpm包、yum安装或者tar.gz压缩包。本章节会教大家通过前两者方式来安装JDK&#xff0c;压缩包的形式因为下载压缩包后上传到服务器环境下&#xff0c;将压缩包解…
阅读更多...
1.6 计算机网络体系结构

1.6 计算机网络体系结构

参考&#xff1a;&#x1f4d5;深入浅出计算机网络 常见的三种计算机网络体系结构 TCP/IP体系结构 路由器一般只包含网络接口层和网际层。 应用层TCP/IP体系结构的应用层包含了大量的应用层协议&#xff0c;例如HTTP、SMTP、DNS、RTP等运输层TCP和UDP是TCP/IP体系结构运输层的…
阅读更多...
召回的在线评估与离线评估

召回的在线评估与离线评估

在现代信息检索、推荐系统等应用场景中&#xff0c;召回阶段扮演着至关重要的角色。召回系统负责从海量候选项中筛选出潜在相关的内容&#xff0c;因此其效果直接影响用户的满意度和系统的效率。为了确保召回系统的性能&#xff0c;我们需要对其进行评估&#xff0c;而评估方法…
阅读更多...
Python3爬虫教程-HTTP基本原理

Python3爬虫教程-HTTP基本原理

HTTP基本原理 1&#xff0c;URL组成部分详解2&#xff0c;HTTP和HTTPS3&#xff0c;HTTP请求过程4&#xff0c;请求&#xff08;Request&#xff09;请求方法&#xff08;Request Method&#xff09;请求的网址&#xff08;Request URL&#xff09;请求头&#xff08;Request H…
阅读更多...
Cilium + ebpf 系列文章-ebpf-map（二）

Cilium + ebpf 系列文章-ebpf-map（二）

前言： 上一章节讲述了什么是：ebpf. Cilium + ebpf 系列文章-什么是ebpf?（一）-CSDN博客一、We Create a container be a Server.二、We Create a container be a Client.三、Them link at a Bridge.四、 Do test.一、Test-tools。3、当你执行l s操作时，会调用open的系统调…
阅读更多...
Vulkan 学习(8)---- vkImageView 创建

Vulkan 学习(8)---- vkImageView 创建

目录 OverView创建方法关键结构参考代码 OverView Vulkan 的图像视图(VkImageView) 用于描述如何访问 VkImage 对象以及访问图像的哪一部分, 图像视图定义了图像格式和访问方式&#xff0c;允许渲染管线和图像进行交互&#xff0c;无论是作为纹理&#xff0c;颜色附件或者深度…
阅读更多...
HTTP.SYS远程代码执⾏(MS15-034) MS--＞Microsoft 2015 -034

HTTP.SYS远程代码执⾏(MS15-034) MS--＞Microsoft 2015 -034

环境 windows server 2012 IIS8.5 复现 1.访问⽹站 2.主⻚图⽚ iis8.5的是&#xff08;iis-85.png&#xff09;&#xff0c;其他的可以根据百度查&#xff0c;每个版本的欢迎⻚都不⼀样 3.编辑请求头&#xff0c;增加Range: bytes0-18446744073709551615字段&#xff0c;若…
阅读更多...
车路云一体化大模型数据治理方案

车路云一体化大模型数据治理方案

车路云一体化大模型数据治理解决方案 "杭州市发改委已批复了杭州交通投资集团的智能网联汽车“车路云一体化”试点项目。这一批复体现了其对该项目可行性研究报告的肯定&#xff0c;预示着杭州市在智能驾驶领域的进一步发展。" 2024年6月18日&#xff0c;第十一届国…
阅读更多...
Spring Boot集成Redis Search快速入门Demo

Spring Boot集成Redis Search快速入门Demo

1.什么是Redis Search&#xff1f; RedisSearch 是一个基于 Redis 的搜索引擎模块&#xff0c;它提供了全文搜索、索引和聚合功能。通过 RedisSearch&#xff0c;可以为 Redis 中的数据创建索引&#xff0c;执行复杂的搜索查询&#xff0c;并实现高级功能&#xff0c;如自动完…
阅读更多...
简历技能面试问答

简历技能面试问答

变成语言和开发工具 C新特性 自动类型推导 (auto)&#xff1a; 自动推导变量的类型&#xff0c;减少显式类型声明的繁琐 范围 for 循环&#xff1a; 用于遍历容器或数组&#xff0c;简化代码。 nullptr&#xff1a; nullptr 取代 NULL&#xff0c;表示空指针&#xff0c;类…
阅读更多...
出海企业如何利用海外云手机开展业务？

出海企业如何利用海外云手机开展业务？

随着全球化的持续推进&#xff0c;越来越多的企业将目光投向海外市场。然而&#xff0c;面对不同国家的网络环境、政策限制以及文化和语言的差异&#xff0c;出海企业在拓展海外业务时遇到了许多障碍。海外云手机作为一种创新的解决方案&#xff0c;为企业提供支持和帮助。 海外…
阅读更多...
【高阶用法】uniapp的i18n/修复/增强/App无重启更换语言

【高阶用法】uniapp的i18n/修复/增强/App无重启更换语言

痛点 在i18n多语言模块使用过程中&#xff0c;发现下面几个问题&#xff0c;需要解决 1&#xff09;uni-best框架下&#xff0c;$t功能函数无法实时的切换语言&#xff0c;可能跟使用有关 2&#xff09;uni-best建议的translate方式在vue块外使用太繁琐&#xff0c;希望不用…
阅读更多...
verilog中非阻塞多个if 优先级判断。

verilog中非阻塞多个if 优先级判断。

always(posedge clk)beginz < 0;if(sel0)z < a;if(sel1)z < b;if(sel2)z < c;if(sel3)z < d;end 比如上述代码&#xff0c;最后一级的优先级最高。
阅读更多...
深入理解 JavaScript 三大作用域：全局作用域、函数作用域、块级作用域

深入理解 JavaScript 三大作用域：全局作用域、函数作用域、块级作用域

一. 作用域 对于多数编程语言&#xff0c;最基本的功能就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后&#xff0c;应该把它放在哪里、程序如何找到它们&#xff1f;是否需要提前约定好一套存储变量、访问变量的规则&#xff1f;答案…
阅读更多...
Teams会议侧边栏应用开发-会议转写

Teams会议侧边栏应用开发-会议转写

Teams应用开发&#xff0c;主要是权限比较麻烦&#xff0c;大量阅读和实践&#xff0c;摸索了几周&#xff0c;才搞明白。现将经验总结如下&#xff1a; 一、目标&#xff1a;开发一个Teams会议的侧边栏应用&#xff0c;实现会议的实时转写。 二、前提&#xff1a; 1&#x…
阅读更多...
株洲芦淞大桥事故的深刻反思

株洲芦淞大桥事故的深刻反思

株洲芦淞大桥事故的深刻反思 2024年9月23日清晨&#xff0c;株洲芦淞大桥上发生了一起令人痛心的交通事故&#xff0c;一辆白色小汽车被出租车追尾后失控&#xff0c;冲向对向车道&#xff0c;最终酿成6人死亡、多人受伤的惨剧。 这起事故不仅给受害者家庭带来了无法弥补的伤…
阅读更多...
【Python机器学习系列】开发Streamlit应用程序并部署机器学习模型（案例+源码）

【Python机器学习系列】开发Streamlit应用程序并部署机器学习模型（案例+源码）

这是我的第357篇原创文章。 一、引言 近年来&#xff0c;随着机器学习和人工智能技术的迅猛发展&#xff0c;越来越多的研究者选择将他们的模型以应用程序&#xff08;App&#xff09;的形式进行部署&#xff0c;从而使审稿人和其他研究者可以通过简单的界面&#xff0c;输入相…
阅读更多...
9月23日

9月23日

头文件 // My_string.h #ifndef MY_STRING_H #define MY_STRING_H#include <cstring> #include <algorithm>class My_string { private:char* data;size_t length;void resize(size_t new_length) {size_t new_capacity std::max(new_length 1, length);char* n…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023