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

2023-09-18 11:33:07


一、标签配置:
标签名描述
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开始播放);
在这里插入图片描述
在这里插入图片描述

更多推荐

AJAX 技术学习笔记(基础)

AsynchronousJavaScriptAndXML概念:异步的JavaScript和XML原生AJAX介绍作用:和服务器进行数据交换,利用HTML一起代替耦合的JSP动态页面完成异步交互同步交互和异步交互:同步交互:客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求(相当于排队,轮到下一个的

HTML、css、javascript的区别

学习web前端的时候粗略学了一下HTML、CSS、JavaScript,但是一直未理解这三者的区别,现在回过头做一下区别。1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。2.CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框

spring_注解笔记

spring使用注解开发文章目录1.前提1Bean2属性注入3衍生的注解4.自动装配5作用域1.前提步骤1:要使用注解开发,就必须要保证AOP包的导入步骤2:xml文件添加context约束步骤3:配置注解的支持<context:annotation-config/><?xmlversion="1.0"encoding

Selenium 4.11 正式发布--再也不用手动更新chrome driver 了

Selenium4.11.0正式发布了,先来看一下主要特性。ChromeDevTools支持的版本现在是:v113、v114和v115(Firefox仍然对所有版本使用v85)通过SeleniumManager支持ChromeForTesting(CfT)SeleniumManager现在可以在PATH或配置的路径上定

MATLAB中scatter3函数用法

目录语法说明向量和矩阵数据表数据其他选项示例创建三维散点图改变标记大小改变标记颜色填充标记设置标记类型设置标记属性绘制表中的数据使用自定义标记大小和颜色绘制表数据指定三维散点图的坐标区使用句柄设置散点序列属性scatter3函数的功能是绘制三维散点图。语法scatter3(X,Y,Z)scatter3(X,Y,Z,S)

7.前端·新建子模块与开发(自动生成)

文章目录学习地址视频笔记自动代码生成模式开发增删改查功能调试功能权限分配脚本实现权限分配学习地址https://www.bilibili.com/video/BV13g411Y7GS/?p=15&spm_id_from=pageDriver&vd_source=ed09a620bf87401694f763818a31c

企业电子招投标采购系统——功能模块&功能描述+数字化采购管理 采购招投标

功能描述1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看所有的立项信息。主要功能包含:招标立项申请、非招标立项申请、采购立项管理。3、采购项目管理:可对项目采购过程全流程管

共聚焦显微镜在化学机械抛光课题研究中的应用

两个物体表面相互接触即会产生相互作用力,研究具有相对运动的相互作用表面间的摩擦、润滑与磨损及其三者之间关系即为摩擦学,目前摩擦学已涵盖了化学机械抛光、生物摩擦、流体摩擦等多个细分研究方向,其研究的数值量级也涵盖了亚纳米到百微米的区间。摩擦本身是一种能量损耗现象,然而得到合理地利用也能产生巨大的正面效益,因此,准确地测定

【Linux】自动化构建工具:make/Makefile

​👻内容专栏:Linux操作系统基础🐨本文概括:工具使用的背景、理解make/makefile工具、探索工作原理(文件修改时间的对比)、.PHONY伪目标、特性等。🐼本文作者:阿四啊🐸发布时间:2023.9.14背景“make”和“Makefile”是用于自动化构建和编译软件项目的工具和文件。它们通常用于编译源

企业电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理

功能描述1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看所有的立项信息。主要功能包含:招标立项申请、非招标立项申请、采购立项管理。3、采购项目管理:可对项目采购过程全流程管

【Linux学习笔记】 - 常用指令学习及其验证(上)

前言:本文主要记录对Linux常用指令的使用验证。环境为阿里云服务器CentOS7.9。关于环境如何搭建等问题,大家可到同平台等各大资源网进行搜索学习,本文不再赘述。由于本人对Linux学习程度尚且较浅,本文仅介绍验证常用指令的常用功能,可能无法展现指令及附带选项的所有功能,大家若想对相关指令内容有更全貌的了解还有劳搜

热文推荐