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

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


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

一、<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>
        <div class="container">
            <h1>腾讯视频:斗破苍穹第4季</h1>
            <p style="text-align: center">
                <!-- 下面的i0043frto05是视频ID -->
                <iframe
                    class="video_iframe"
                    style="z-index: 1"
                    src="http://v.qq.com/iframe/player.html?vid=i0043frto05&amp;width=500&amp;height=375&amp;auto=0"
                    allowfullscreen=""
                    frameborder="0"
                    height="375"
                    width="500"
                ></iframe>
            </p>
        </div>
    </body>
</html>

小结

需要时再详细掌握。

相关文章
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
42 6
|
5天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
5天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
JavaScript 前端开发 Go
从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)——基础中的基础 概要:javascript的组成、 各个组成部分的作用 、 一、javascript的组成   javascript   ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.
1050 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
109 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
70 4