html 判断视频是否播放

news2025/1/17 1:46:38

html 判断视频是否播放

 

html

<video id="video" loop preload="auto" autoplay>
    <source src="1.mp4" type="video/mp4">
    您的浏览器不支持Video标签。
</video> 

js代码

var video=document.querySelector("#video"); 
// paused :设置或返回音频/视频是否暂停。
if (video.paused) 
{ 
	console.log('视频是暂停');
	video.play(); //播放
}
else 
{
	console.log('视频是播放');
	video.pause();//暂停
}

视频标签文档

HTML 音频/视频 DOM 参考手册

HTML 音频/视频 | 菜鸟教程

HTML 音频/视频 方法

方法描述
addTextTrack()向音频/视频添加新的文本轨道。
canPlayType()检测浏览器是否能播放指定的音频/视频类型。
load()重新加载音频/视频元素。
play()开始播放音频/视频。
pause()暂停当前播放的音频/视频。

HTML 音频/视频属性

属性描述
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay设置或返回是否在加载完成后随即播放音频/视频。
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls设置或返回音频/视频是否显示控件(比如播放/暂停等)。
crossOrigin设置或返回音频/视频的 CORS 设置。
currentSrc返回当前音频/视频的 URL。
currentTime设置或返回音频/视频中的当前播放位置(以秒计)。
defaultMuted设置或返回音频/视频默认是否静音。
defaultPlaybackRate设置或返回音频/视频的默认播放速度。
duration返回当前音频/视频的长度(以秒计)。
ended返回音频/视频的播放是否已结束。
error返回表示音频/视频错误状态的 MediaError 对象。
loop设置或返回音频/视频是否应在结束时重新播放。
mediaGroup设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)。
muted设置或返回音频/视频是否静音。
networkState返回音频/视频的当前网络状态。
paused设置或返回音频/视频是否暂停。
playbackRate设置或返回音频/视频播放的速度。
played返回表示音频/视频已播放部分的 TimeRanges 对象。
preload设置或返回音频/视频是否应该在页面加载后进行加载。
readyState返回音频/视频当前的就绪状态。
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking返回用户是否正在音频/视频中进行查找。
src设置或返回音频/视频元素的当前来源。
startDate返回表示当前时间偏移的 Date 对象。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
volume设置或返回音频/视频的音量。

HTML 音频/视频事件

事件描述
abort当音频/视频的加载已放弃时触发。
canplay当浏览器可以开始播放音频/视频时触发。
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange当音频/视频的时长已更改时触发。
emptied当目前的播放列表为空时触发。
ended当目前的播放列表已结束时触发。
error当在音频/视频加载期间发生错误时触发。
loadeddata当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata当浏览器已加载音频/视频的元数据时触发。
loadstart当浏览器开始查找音频/视频时触发。
pause当音频/视频已暂停时触发。
play当音频/视频已开始或不再暂停时触发。
playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress当浏览器正在下载音频/视频时触发。
ratechange当音频/视频的播放速度已更改时触发。
seeked当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled当浏览器尝试获取媒体数据,但数据不可用时触发。
suspend当浏览器刻意不获取媒体数据时触发。
timeupdate当目前的播放位置已更改时触发。
volumechange当音量已更改时触发。
waiting当视频由于需要缓冲下一帧而停止时触发。

 


HTML 事件属性-全局事件属性

HTML 事件 | 菜鸟教程

多媒体事件(Media Events)

通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于 HTML 媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>:

属性描述
onabortscript当发生中止事件时运行脚本
oncanplayNewscript当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythroughNewscript当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchangeNewscript当媒介长度改变时运行脚本
onemptiedNewscript当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本
onendedNewscript当媒介已抵达结尾时运行脚本
onerrorNewscript当在元素加载期间发生错误时运行脚本
onloadeddataNewscript当加载媒介数据时运行脚本
onloadedmetadataNewscript当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstartNewscript当浏览器开始加载媒介数据时运行脚本
onpauseNewscript当媒介数据暂停时运行脚本
onplayNewscript当媒介数据将要开始播放时运行脚本
onplayingNewscript当媒介数据已开始播放时运行脚本
onprogressNewscript当浏览器正在取媒介数据时运行脚本
onratechangeNewscript当媒介数据的播放速率改变时运行脚本
onreadystatechangeNewscript当就绪状态(ready-state)改变时运行脚本
onseekedNewscript当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseekingNewscript当媒介元素的定位属性为真且定位已开始时运行脚本
onstalledNewscript当取回媒介数据过程中(延迟)存在错误时运行脚本
onsuspendNewscript当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdateNewscript当媒介改变其播放位置时运行脚本
onvolumechangeNewscript当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaitingNewscript当媒介已停止播放但打算继续播放时运行脚本

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

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

相关文章

phpstudy如何安装PHP扩展sg11

1、下载sg11扩展文件压缩包&#xff0c;下载地址&#xff1a;PHP扩展sg11.zip - 蓝奏云 2、解压下载好的sg11压缩包&#xff0c;选择对应你自己的服务器系统文件夹&#xff0c;我的是Windows 64-bit 3、打开Windows 64-bit&#xff0c;复制对应PHP版本的.win文件&#xff0c;…

电脑一键重装系统win11步骤教程

win11系统是微软目前最新的操作系统&#xff0c;很多人都想给电脑重装系统win11体验。那么具体要怎么重装系统win11呢?我们可借助一键装机工具实现&#xff0c;下面就演示下简单的一键重装系统win11步骤教程 工具/原料&#xff1a; 系统版本&#xff1a;Windows 11 品牌型号…

基于轻量级ShuffleNetv2+YOLOv5的DIC-C2DH-HeLa细胞检测识别分析系统

ShuffleNetv2可以说是目前轻量级网络模型中的翘楚&#xff0c;将ShuffleNetv2于yolov5整合开发可以使得模型更加轻量化&#xff0c;在提升模型速度的同时保证有效的精度。本文的主要工作就是将ShuffleNetv2整合进yolov5中来开发构建细胞检测模型&#xff0c;首先看下效果图&…

4-3文件管理-磁盘组织与管理

文章目录一.磁盘的结构二.磁盘调度算法&#xff08;一&#xff09;一次读/写磁盘需要的时间&#xff08;二&#xff09;磁盘调度算法1.先来先服务FCFS2.最短寻找时间优先SSTF3.扫描算法/电梯调度算法SCAN4.循环扫描算法C-SCAN&#xff08;三&#xff09;减少磁盘延迟时间的方法…

再谈模板(19)

目录 1、非类型模板参数 2、模板的特化 1、定义 2、函数模板特化 3、类模板特化 1、全特化 2、偏特化 3、分离编译 1、什么是分离编译 2、模板不支持分离编译 4、模板总结 1、非类型模板参数 模板参数&#xff1a;类型形参与非类型形参。 类型形参&#xff1a;出现…

Leetcode - 24 - 两两交换链表中的节点

24. 两两交换链表中的节点 题目描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;h…

重写部分调试体系的DebugPort隐藏

背景逛世界上最大的交友网站的时候发现了一个开源的vt调试器&#xff0c;抱着学习的心态&#xff0c;下载下来学习学习。但是呢&#xff0c;实际编译出来的程序和release发布的有很大的区别&#xff0c;而且源码很乱&#xff0c;release版本的驱动至少能调试程序&#xff0c;但…

文件IO操作

日升时奋斗&#xff0c;日落时自省 目录 1、文件基本认知 1.1、文件路径 1.2、相对路径 1.3、文件类型 2、Java的文件操作 2.1、文件操作类File 3、数据流读写 3.1字节流读文件 3.2、字节流写文件 3.3、字符流读操作 3.4、字符流写操作 4、文件操作案例 4.1、删除…

【自学Python】Python类型转换

Python类型转换 Python类型转换教程 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Golang 或 C/C 语言那样还要在使用 变量 前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 对 Python 内置的数据类型进行转换时&#xff0c;可以使…

valgrind callgrind使用

valgrind --toolcallgrind --dump-instryes ./foo # ,这里会运行很久,执行完毕后会生成一个callgrind.out.1266511如果你调试的程序是多线程&#xff0c;你也可以在命令行中加一个参数 -separate-threadsyes。这样就会为每个线程单独生成一个性能分析文件。如下&#xff1a;val…

好玩的小游戏系列 (一)基于html+js 原生贪吃蛇

一朵花如果只被用来观赏那只呈现出它的外在意义只是它生命的一部分若是不能够将其内在更实质的美发挥出来充其量也不过就是一朵死的花而已。 目录 一、前言 二、代码介绍 三、效果显示 四、编码实现 index.html jquery-1.10.2.js 五、获取源码 获取源码&#xff1f;私信…

【vue2】组件进阶与插槽(匿名·具名·作用域插槽详解)

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;v-modedl表单双向绑定、ref|$ref操作dom、dynamic动态组件、$nextTick同步、匿名插槽、具…

Java常用开发工具有哪些

本节介绍一下 Java 常用的几个开发工具。下面这些工具或许功能和作用不同&#xff0c;但是有着一个共同的主旨&#xff0c;那就是——它们都是为了给 Java 编码和开发提供卓越的支持。 常用源码编辑工具介绍 Java 源代码本质上其实就是普通的文本文件&#xff0c;所以理论上来…

【阶段三】Python机器学习16篇:机器学习项目实战:集成模型介绍、随机森林模型的基本原理与随机森林分类模型

本篇的思维导图: 集成模型介绍 集成学习模型使用一系列弱学习器(也称为基础模型或基模型)进行学习,并将各个弱学习器的结果进行整合,从而获得比单个学习器更好的学习效果。集成学习模型的常见算法有Bagging算法和Boosting算法两种。 算法类型 模型名称

lua 入门

安装 linux 下安装方式 curl -R -O http://www.lua.org/ftp/lua-5.4.4.tar.gz tar zxf lua-5.4.4.tar.gz cd lua-5.4.4 # 编译并测试没有问题 make all test make install卸载 cd lua-5.4.4 # 删除相关配置,之后可以删除 lua-5.4.4 make uninstall执行 文件以 .lua 结尾 方…

Flume第一章:环境安装

系列文章目录 Flume第一章&#xff1a;环境安装 文章目录系列文章目录前言一、Flume是什么&#xff1f;二、环境安装1.文件下载2.环境安装3.官方案例三、几个案例1.实时监控 Hive 日志&#xff0c;并上传到 HDFS 中2.使用 Flume 监听整个目录的文件&#xff0c;并上传至 HDFS3…

【构造】Codeforces Round #843 (Div. 2) B Gardener and the Array

Problem - B - Codeforces题意&#xff1a;给定一个序列&#xff0c;让你判断是否存在两个子序列使得这两个子序列或起来相等思路&#xff1a;设两个子序列是a和b两个子序列凭空出现&#xff0c;那肯定考虑构造满足的条件是&#xff1a;a!bf(a)f(b)如果只考虑第二个条件&#x…

java系列文章之反射

文章目录一、动态语言二、反射机制概念三、反射的应用场合1. 编译时类型和运行时类型2. 编译时类型无法获取具体方法四、 反射 API五、反射使用步骤六、获取 Class 对象的 3 种方法七、创建对象的两种方法总结一、动态语言 动态语言&#xff0c;是指程序在运行时可以改变其结构…

读书:《5%的改变》

《5%的改变》 我们并不需要100%的改变&#xff0c;彻底推翻以前的旧习惯&#xff0c;对于绝大多数人来说&#xff0c;并不太现实&#xff0c;不如考虑一下只改变5%。 一天结束&#xff0c;22:00&#xff0c;开始为睡觉做准备&#xff0c;反思一下&#xff0c;发现今天好像什…

Pytorch LSTM实现中文单词预测(附完整训练代码)

Pytorch LSTM实现中文单词预测(附完整训练代码) 目录 Pytorch LSTM实现中文单词预测(词语预测 附完整训练代码) 1、项目介绍 2、中文单词预测方法&#xff08;N-Gram 模型&#xff09; 3、训练词嵌入word2vec&#xff08;可选&#xff09; 4、文本预处理 &#xff08;1&…