编程笔记 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>

小结

需要时再详细掌握。

相关文章
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
27 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
24 4
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
32 0
html5+three.js公路开车小游戏源码
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
1月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
35 3
|
6月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
85 0
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
182 0
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
112 0