编程笔记 html5cssjs 031 HTML视频

编程笔记 html5&css&js 031 HTML视频

  • 一、`<video>`: 视频元素
  • 二、属性
  • 三、事件
  • 四、练习
  • 小结

视频应用广泛,当前的互联网应用中,视频越来越重要,比如抖音、快手、腾讯视频等应用。

一、<video>: 视频元素

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。
和 元素的使用类似,在 src 属性里加入一个我们需要展示的视频地址,同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

二、属性

类似于所有其他 HTML 元素,video 元素也支持 全局属性。
autoplay
布尔属性;声明该属性后,视频会尽快自动开始播放,不会停下来等待数据全部加载完成。
备注: 自动播放音频(或有声视频)可能会破坏用户体验,所以应该尽可能避免。如果你一定要提供自动播放功能,你应该加入开关(让用户主动打开自动播放)。然而,如果需要创建一些媒体元素,其播放源由用户在稍后设置,自动播放就会很有用。想了解如何正确使用自动播放,可参见我们的 自动播放指南。如果使用 autoplay=“false” 来关闭视频的自动播放功能,会不起作用;只要 <video> 标签中有 autoplay 属性,视频就会自动播放。要移除自动播放,需要完全删除该属性。
controls
加上这个属性,浏览器会在视频底部提供一个控制面板,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放。
controlslist 实验性非标准
当浏览器显示视频底部的播放控制面板(例如,指定了 controls 属性)时,controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。
允许的值有 nodownload、nofullscreen 和 noremoteplayback。
如果要禁用画中画模式(和控件),请使用 disablePictureInPicture 属性。
crossorigin
该枚举属性指明是否使用 CORS(跨域资源共享)来获取相关视频。允许 CORS 的资源 可在 <canvas> 元素中被重用,而不会被污染。允许的值如下:
anonymous
在发送跨域请求时不携带凭证(credential)信息。也就是说,浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任(也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。
use-credentials
在发送跨域请求时携带凭证(credential)信息。也就是说,浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任(通过设置 Access-Control-Allow-Credentials: HTTP 响应首部),图像会被 污染,并且它的使用会受到限制。不加这个属性时,获取资源不会使用 CORS 请求(即不会发送 Origin: HTTP 请求首部),保证其在 元素中使用时不会被污染。如果指定非法值,会被当作指定了枚举关键字 anonymous 一样使用。查看 CORS 设置属性 (en-US) 获取更多信息。
disablepictureinpicture 实验性
防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性,右键菜单中的“画中画”选项会被禁用
disableRemotePlayback 实验性
布尔属性,用于在使用有线(HDMI、DVI 等)和无线技术(Miracast、Chromecast、DLNA、AirPlay 等)连接设备时,禁用远程播放功能。在 Safari 中,你可以使用 x-webkit-airplay=“deny” 作为兜底方案。
height
视频显示区域的高度,单位是 CSS 像素(仅限绝对值;不支持百分比)。
loop
布尔属性;指定后,会在视频播放结束的时候,自动返回视频开始的地方,继续播放。
muted
布尔属性,指明在视频中音频的默认设置。设置后,音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。
playsinline
布尔属性,指明视频将内联(inline)播放,即在元素的播放区域内。请注意,没有此属性并不意味着视频始终是全屏播放的。
poster
海报帧图片 URL,用于在视频处于下载中的状态时显示。如果未指定该属性,则在视频第一帧可用之前不会显示任何内容,然后将视频的第一帧会作为海报(poster)帧来显示。
preload
该枚举属性旨在提示浏览器,作者认为在播放视频之前,加载哪些内容会达到最佳的用户体验。可能是下列值之一:
none: 表示不应该预加载视频。
metadata: 表示仅预先获取视频的元数据(例如长度)。
auto: 表示可以下载整个视频文件,即使用户不希望使用它。
空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同,即使规范建议设置为 metadata。
备注: autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性,浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值,这仅仅只是个提示。
src
要嵌到页面的视频的 URL。可选;你也可以使用 video 块内的 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度,单位是 CSS 像素(仅限绝对值;不支持百分比)。

三、事件

事件名	触发时机
audioprocess (en-US)已弃用	The input buffer of a ScriptProcessorNode is ready to be processed.
canplay	浏览器可以播放媒体文件了,但估计没有足够的数据来支撑播放到结束,不必停下来进一步缓冲内容。
canplaythrough	浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete	OfflineAudioContext 渲染完成。
durationchange	duration 属性的值改变时触发。
emptied (en-US)	媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载它。
ended	视频停止播放,因为 media 已经到达结束点。
loadeddata	media 中的首帧已经完成加载。
loadedmetadata	已加载元数据。
pause	播放已暂停。
play	播放已开始。
playing	由于缺乏数据而暂停或延迟后,播放准备开始。
progress	在浏览器加载资源时周期性触发。
ratechange (en-US)	播放速率发生变化。
seeked (en-US)	跳帧(seek)操作完成。
seeking (en-US)	跳帧(seek)操作开始。
stalled (en-US)	用户代理(user agent)正在尝试获取媒体数据,但数据意外未出现。
suspend (en-US)	媒体数据加载已暂停。
timeupdate	currentTime 属性指定的时间发生变化。
volumechange (en-US)	音量发生变化。
waiting (en-US)	由于暂时缺少数据,播放已停止。

使用说明
浏览器并不是都支持相同的视频格式 (en-US),所以你可以在 <source> 元素里提供多个视频源,然后浏览器将会使用它所支持的第一个源。
其他的使用注意事项:
如果你没有指定 controls 属性,那么视频不会展示浏览器自带的控件,你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。HTMLMediaElement 会激活许多不同的事件 ,以便于让你可以控制视频(和音频)内容。
你可以用 CSS 属性 object-position 来调整视频在元素内部的位置,它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题,你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

四、练习

<!DOCTYPE html>
<html lang="zh-cn"><title>编程笔记 html5&css&js HTML视频</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}.container {width: 500px; /* 设置容器的宽度 */margin: 0 auto; /* 将左右边距设置为自动 */line-height: 2;}</style><body><div class="container"><h1>视频:青少年成长管理 引言</h1><video width="320" height="240" controls="controls"><source src="mp4/00 青少年成长管理 引言 (1).mp4" type="video/mp4" /></video></div></body>
</html>

小结

需要时再详细掌握。

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

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

相关文章

Python2048小游戏核心算法(python系列26)

前言&#xff1a;做核心算法之前我们可以玩一玩这个小游戏来了解一下规则。2048在线试玩 运行效果&#xff1a; 代码案例&#xff1a; # 2048小游戏# 1.将列表中零移动到列表的末尾 def move_zeroes():x 0for i in range(len(list_nums)):if list_nums[i] ! 0:list_nums[x],…

“单项突出”的赢双科技IPO加速,比亚迪是最强助力?

近日&#xff0c;新能源汽车核心部件供应商赢双科技首次递表科创板&#xff0c;其凭借旋转变压器产品就坐稳了新能源车企主要供应商的地位&#xff0c;从核心业务及业绩情况来看&#xff0c;赢双科技不愧为“单项冠军”。 据悉&#xff0c;赢双科技本次IPO拟募资8.47亿元&…

两种MinIO分布式集群部署方式

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 相关文章推荐&#xff1a; 对象存储MinIO的简介与部署 记录一次跨越16个月的minio版本升级与数据迁移 MinIO集群怎么接入Prometh…

文字识别与光学字符识别有什么区别?

随着科技的不断发展&#xff0c;文字识别和光学字符识别技术已经成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;许多人对于这两者之间的区别并不十分清楚。本文将详细探讨文字识别与光学字符识别之间的差异&#xff0c;以帮助读者更好地理解这两种技术。 文字识…

Unity组件开发--相机跟随角色和旋转

1.相机跟随组件&#xff0c;节点&#xff1a; 2.相机跟随组件脚本&#xff1a; using System; using System.Collections; using System.Collections.Generic; using Unity.Burst.Intrinsics; using UnityEngine; using UnityEngine.UI;public class CameraFollow : Singleton&…

番茄工作法

番茄工作法是一种时间管理方法&#xff0c;主要适用于专注工作。它的基本步骤包括&#xff1a; 设定一个25分钟的闹钟。默念三二一&#xff08;321法则&#xff09;&#xff0c;开始全身心投入工作。用专注的状态高效工作25分钟&#xff0c;不允许走神。如果做到了步骤3&#…

人工智能帮我建商城——文心一言代写基于jeecgboot的商城系统【springboot】

最近打算手搓一个jeecgboot的虚拟产品商城系统&#xff08;无发货物流&#xff09;【挖坑】 本文章会记录从0开发一个商城的主要内容。【使用文心一言深度参与制作和设计&#xff0c;甚至编程】 如果大家有什么意见&#xff0c;可以评论区讨论 本篇文章是一个新坑&#xff0…

[设计模式 Go实现] 结构型~享元模式

享元模式从对象中剥离出不发生改变且多个实例需要的重复数据&#xff0c;独立出一个享元&#xff0c;使多个对象共享&#xff0c;从而节省内存以及减少对象数量。 flyweight.go package flyweightimport "fmt"type ImageFlyweightFactory struct {maps map[string]…

Java——判空方式ObjectUtils/CollectionUtils/StringUtils及区别

目录 前言一、ObjectUtils.isEmpty二、CollectionUtils.isEmpty三、StringUtils.isEmpty四、StringUtils.isBlank四、!null后续敬请期待 前言 Java——判空方式ObjectUtils/CollectionUtils/StringUtils及区别 一、ObjectUtils.isEmpty 可判断String、集合、基本数据类型等数…

apk反编译修改教程系列---修改apk包名等信息 让一个应用拥有无限分身 手机电脑同步演示【九】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】 apk反编译修改教程系列---简单…

Rust 常用集合(上)

目录 1、使用 Vector 储存列表 1.1 新建 vector 1.2 更新 vector 1.3 读取 vector 的元素 1.4 遍历 vector 中的元素 1.5 使用枚举来储存多种类型 1.6 丢弃 vector 时也会丢弃其所有元素 2、使用字符串储存 UTF-8 编码的文本 2.1 什么是字符串&#xff1f; 2.2 新建字…

联邦机构如何利用人工智能加速 IT 系统现代化

尽管行业压力巨大&#xff0c;许多公共部门组织仍然需要依赖已有数十年历史的遗留 IT 系统&#xff0c;这些系统可能会增加安全风险和成本&#xff0c;导致人员短缺&#xff0c;并减缓开发团队交付关键任务应用程序的速度。 与此同时&#xff0c;考虑到这些大型系统中内存不安…

抖音蓝V账号矩阵怎么搭建?抖音蓝v号如何开通子帐户?

一、抖音蓝V是什么&#xff1f;有什么价值&#xff1f; 所谓抖音蓝V&#xff0c;就是抖音企业蓝V认证账号&#xff0c;2018年6月推出来的。 抖音蓝V有什么价值&#xff1f; 1&#xff09;可以直接传递你的企业观或产品理念&#xff1b; 2&#xff09;可以缩短你的企业与抖音…

微服务系统面经之四: 以秒杀系统为例 - 用户秒杀状态的通知【京东支付后端一面】

28 秒杀状态相关 28.1 对于一个秒杀系统&#xff0c;用户点击秒杀按钮后&#xff0c;怎么才能知道其秒杀状态&#xff1f;【京东支付后端一面】 对于秒杀系统&#xff0c;用户点击秒杀按钮后&#xff0c;确定其秒杀状态的过程通常包含以下几个关键步骤&#xff1a; 请求处理&…

设计模式的艺术P1基础—2.3 类之间的关系

设计模式的艺术P1基础—2.3 类之间的关系 在软件系统中&#xff0c;类并不是孤立存在的&#xff0c;类与类之间存在各种关系。对于不同类型的关系&#xff0c;UML提供了不同的表示方式 1&#xff0e;关联关系 关联&#xff08;Association&#xff09;关系是类与类之间最常用…

k8s yaml文件pod的生命周期

Pod是k8s中最小限额资源管理组件&#xff0c;也是最小化运行容器化的应用的资源管理对象。 Pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合。 在一个pod当中运行一个容器是最常用的方式。 在一个pod当中同时运行多个容器&#xff0c;在一个pod当中…

异常处理:全面覆盖与精细化管理的平衡

异常处理&#xff1a;全面覆盖与精细化管理的平衡 在软件开发中&#xff0c;异常处理是保证系统稳定性和用户体验的重要环节。对于是否应当全面覆盖所有异常并设立兜底机制&#xff0c;业界存在着两种主流思路&#xff1a;全面覆盖原则和精细化处理。如何在这两者间取得平衡&a…

WPF ComboBox限制输入长度

在WPF中&#xff0c;你可以通过两种方式来限制ComboBox的输入长度&#xff1a; 使用PreviewTextInput事件&#xff1a;你可以在这个事件的处理程序中检查输入文本的长度&#xff0c;如果超过最大长度则阻止输入。 <ComboBox PreviewTextInput"ComboBox_PreviewTextIn…

python插入排序

插入排序&#xff08;Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常使用in-place排序&#xff0…

域名解析服务器:连接你与互联网的桥梁

域名解析服务器&#xff1a;连接你与互联网的桥梁 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将探讨一个网络世界中至关重要却鲜为人知的角…