【JavaScript】video标签配置及相关事件:

news2024/11/22 9:29:22

文章目录

        • 一、标签配置:
        • 二、事件:
        • 三、案例:


一、标签配置:

标签名描述
src要播放的路径地址
autoplay是否自动播放,默认值是false,(Boolean)
loop是否循环播放,默认值是false,(Boolean)
muted是否静音播放,默认值是false,(Boolean)
initial-time制定和视频初始播放位置,单位为秒(字节跳动小程序不支持,Number)
duration指定视频时长(字节跳动小程序不支持,Number)
controls是否显示默认播放控件
danmu-list弹幕列表(字节跳动小程序不支持,ObjectArray)
danmu-btn是否显示弹幕按钮,只在初始化时有效,不可更改(字节跳动小程序不支持,Boolean)
enable-danmu是否显示弹幕,只在初始化时有效,不可更改(字节跳动小程序不支持,Boolean)
page-gesture在非全屏模式下,是否开启亮度和声音调节手势(微信小程序、H5,Boolean)
direction设置全屏时视频的方向,不指定规则则更具宽高比自行判断,有效值为0(正常径向)、90(屏幕逆时针90度)、-90(屏幕顺时针90度)(字节跳动小程序、H5不支持,Boolean)
show-progress若不设置,宽度大于240时才会显示 (字节跳动小程序不支持,Boolean)
show-fullscreen-btn是否显示全屏按钮(Boolean)
show-play-btn是否显示视频底部控制栏的播放按钮(Boolean)
show-enter-play-btn是否显示视频中间的播放按钮 (字节跳动小程序不支持,Boolean)
enable-progress-gesture是否开启控制进度的手势 (字节跳动小程序不支持,Boolean)
object-fit当视频大小与vide容器大小不一教时,视环的表现形式contain:包含,fill:填充,cover覆盖(微信小程序、字节跳动小程序、H5,String)
poster视频封面的图片网络资源地址,如果controls属性值为false则设置poster 无效(String)
show-mute-btn是否显示静音按钮(微信小程序,Boolean)
title视的标频 全屏时在顶部展示(微信小程序,String)
play-btn-position播放按钮的位置 (微信小程序、字节跳动小程序,String)
enable-play-gesture是否开启播放手势,即双击切换播放/暂停(微信小程序Boolean)
auto-pause-if-open-navigate当跳转到其它小程序页面时,是否自动暂停本页面的视频(微信小程序Boolean)
vslide-gesture当跳转到其它微信原生页面时,是否自动暂停本页面的视频(微信小程序Boolean)
vslide-gesture-in-fullscreen在非全屏模式下,是否开启亮度与音量调节手势,在全屏模式下,是否开启亮度与音量调节手势 (微信小程序Boolean)
ad-unit-id视频前贴广告单元ID,更多详情可参考开放能力 (微信小程序String)
poster-for-crawler用于给搜索等场景作为视频封面展示,建议使用无播放icon的视频制面图,只支持网络地址 (微信小程序String)
ad-unit-id微信小程字 视频前贴广告单元D,更多详情可参考开放能力[视频前贴广告] (微信小程序String)

二、事件:

事件描述
loadstart浏览器开始在网上寻找媒体数据
progress浏览器正在获取媒体数据
suspend浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error获取媒体数据过程中出错
emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体
stalled浏览器尝试获取媒体数据失败
play即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause播放暂停,当执行了pause方式时触发
loadedmetadata浏览器获取完毕媒体的时间长和字节数
waiting播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seekingseeking属性变为true,浏览器正在请求数据
seekedseeking属性变为false,浏览器停止请求数据
timeupdate由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended播放结束后停止播放
ratechangedefaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange播放时长被改变
volumechangevolume属性(音量)被改变或muted属性(静音状态)被改变

在这里插入图片描述

三、案例:

(1)自动播放;
(2)监听播放完成,自动划到一下页再自动播放(从0开始播放);
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Hbase工作原理

Hbase:HBase 底层原理详解(深度好文,建议收藏) - 腾讯云开发者社区-腾讯云 Hbase架构图 同一个列族如果有多个store,那么这些store在不同的region Hbase写流程(读比写慢) MemStore Flush Hbas…

arm day2(9.15)数据操作指令,跳转指令,特殊功能寄存器指令,+XMind

作业 1.求最大公约数&#xff1a; .text .global _start _start:mov r0,#0x9mov r1,#0x15bl Loop Loop:cmp r0,r1 比较r0寄存器和r1寄存器的中的值beq stop 当两数相同时,退出程序subhi r0,r0,r1 r0>r1 r0 r0 - r1subcc r1,r1,r0 r0<r1 r1 r1 - r0mov pc,lr 恢复现…

自动驾驶行业观察之2023上海车展-----整体发展趋势

1.行业趋势 新能源势不可挡。 本次车展上首发了150多款新车&#xff0c;约有100款是新能源车;跨国车企全面电动化&#xff0c;但日韩系布局相对缓慢&#xff1b; 2.自主品牌 品牌持续向上 本届车展自主品牌开始疯狂向高端内卷&#xff0c;高端化态度坚决 &#xff08;包括仰…

Modbus RTU(Remote Terminal Unit)与RS-485协议介绍(主站设备(Master)、从站设备(Slave))

文章目录 Modbus RTU与RS-485协议介绍一、引言二、Modbus RTU 协议介绍2.1 Modbus RTU 协议简介2.2 Modbus RTU 协议帧结构主站设备、从站设备与从站设备地址2.3 Modbus RTU 协议举例 三、RS-485 协议介绍3.1 RS-485 协议简介3.2 RS-485 物理连接方式3.3 RS-485 与 Modbus RTU …

代码片段的理解

1.后面的error直接走的是失败的回调 例如:权限不足,可以理解为服务器的一种形式 2.前面走的是成功的回调 但是也可能不对,例如在传过去的参数,在数据库查询不了这个值,传递过来的值不一样&#xff0c;这样它也是走的成功回调。

提升前端开发效率:基于vue的van-radio-group组件封装指南

前言 vant 作为一款流行的 ui 框架&#xff0c;其中&#xff0c;van-radio-group 组件是一个常用的单选框组件&#xff0c;但有时我们需要根据项目需求进行定制化封装。本文将介绍如何基于 vue 框架封装 van-radio-group 组件&#xff0c;让我们一起来探索吧&#xff01; 封装文…

Python网络编程:构建网络应用与通信

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 Python是一门强大的编程…

node查询七牛云上的文件信息

const qiniu require(qiniu) const {getQiNiuKey, } require(./tools)//#region 七牛云 const { accessKey, secretKey } getQiNiuKey() const mac new qiniu.auth.digest.Mac(accessKey, secretKey) let config new qiniu.conf.Config() // 空间对应的机房 config.zone …

目标跟踪方向开源数据集资源汇总

Temple Color 128 数据集下载链接&#xff1a;http://suo.nz/2dKEEL 本数据集包含一大组 128 种颜色序列&#xff0c;带有基本事实和挑战因素注释&#xff08;例如&#xff0c;遮挡&#xff09; NfS高帧率视频数据集 数据集下载链接&#xff1a;http://suo.nz/34o8df 第一个…

旺店通·企业奇门与金蝶云星空对接集成订单查询连通销售订单新增(旺店通销售-金蝶销售订单-小红书)

旺店通企业奇门与金蝶云星空对接集成订单查询连通销售订单新增(旺店通销售-金蝶销售订单-小红书) 接通系统&#xff1a;旺店通企业奇门 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会…

react-route的路由

React-Router是一个基于React的强大路由库&#xff0c;它可以帮助我们在React应用中实现页面之间的跳转和路由管理。本文将详细介绍React-Router的路由功能、常用功能模块、路由传参和路由嵌套&#xff0c;并提供相关代码和解释。 路由功能 React-Router通过管理URL和组件的映…

Vue3 ~

变动 实例 const app new Vue({}) Vue.use() Vue.mixin() Vue.component() Vue.directive()const app Vue.createApp({}) app.use() app.mixin() app.component() app.directive()createApp 代替 new Vue 允许多个根标签 createStore 代替 Vue.use(Vuex) createRouter 代替…

保障网络安全:IP代理识别API的作用与应用

引言 随着互联网的不断发展&#xff0c;网络安全问题已经变得愈发重要。在网络上&#xff0c;恶意用户可以利用IP代理隐藏其真实身份&#xff0c;从而发动各种网络攻击或欺诈行为。为了保障网络安全&#xff0c;IP代理识别API成为了一种不可或缺的工具&#xff0c;本文将深入探…

计算机竞赛 深度学习 opencv python 公式识别(图像识别 机器视觉)

文章目录 0 前言1 课题说明2 效果展示3 具体实现4 关键代码实现5 算法综合效果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的数学公式识别算法实现 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学…

Apollo配置更新通知

文章目录 启用方式hook编写服务部署本地部署容器化部署构建镜像 使用 ⚡️: 应领导要求想要把 Apollo 配置变更信息更新到企业微信群中&#xff0c;线上出现异常可根据变更时间&#xff0c;快速反应是否是配置变更导致异常 启用方式 &#x1f31b;: 前提有一个可正常使用的Apo…

微服务保护-Sentinel

初识Sentinel 雪崩问题及解决方案 雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 如图&#xff0c;如果服务提供者I发生了故障&#xff0c;当前的应用的部分业务因为依赖于服务I&#xff0c;因此也会被阻塞。此时&a…

深度学习pytorch之tensorboard和transform的使用

这样操作是引入tensorboard&#xff0c;申明一个类&#xff0c;logs是生成日志的文件夹&#xff0c;事件就在这里产生。 writer为申明的实例&#xff0c;这里做的画线操作 第一个是tags是图片的标签&#xff0c;第二个参数是y值&#xff0c;第三个是步长&#xff0c;x值 关闭…

Kotlin simple convert ArrayList CopyOnWriteArrayList MutableList

Kotlin simple convert ArrayList CopyOnWriteArrayList MutableList Kotlin读写分离CopyOnWriteArrayList_zhangphil的博客-CSDN博客Java并发多线程环境中&#xff0c;造成死锁的最简单的场景是&#xff1a;多线程中的一个线程T_A持有锁L1并且申请试图获得锁L2&#xff0c;而多…

TDengine 与煤矿智能 AI 视频管理系统实现兼容性互认

煤矿行业是一个充满危险和复杂性的领域&#xff0c;具备产业规模大、分布地域广、安全性要求高等特点&#xff0c;为了实现智能化预警、预测等目的&#xff0c;煤矿企业纷纷采用现代化的技术来提高安全性、生产效率和管理水平。煤矿智能 AI 视频管理系统可以助力企业更好地进行…

JMeter:断言之响应断言

一、断言的定义 断言用于验证取样器请求或对应的响应数据是否返回了期望的结果。可以是看成验证测试是否预期的方法。 对于接口测试来说&#xff0c;就是测试Request/Response&#xff0c;断言即可以针对Request进行&#xff0c;也可以针对Response进行。但大部分是对Respons…