html播放视频

2023-09-22 09:33:11

文章目录

<embed>标签

<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提：浏览器支持 Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。

<embed src="movie.swf" height="200" width="200"/>

HTML 代码显示嵌入网页的 Flash 视频。

<object> 标签

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
前提：浏览器支持Flash。iPad 和 iPhone 不能显示 Flash 视频。视频不能转成其他格式。

<object data="movie.swf" height="200" width="200"/>

HTML 片段显示嵌入网页的一段 Flash 视频：

<video>标签

<video> 是 HTML 5 中的新标签。<video> 标签的作用是在 HTML 页面中嵌入视频元素。

问题：

  • <video> 元素在老式浏览器中无效。
  • <video> 元素无法通过 HTML 4 和 XHTML 验证。

示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>视频</title> 
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

</body>
</html>

在这里插入图片描述
<video> 元素提供了 播放、暂停和音量控件来控制视频。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

标签描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 和
<track> 定义在媒体播放器文本轨迹

<video>浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素。
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

视频格式与浏览器的支持

  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器支持的视频格式
浏览器MP4 WebM Ogg
Internet Explorer YES NO NO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (从 Opera 25 起)YESYES
视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

DOM元素提供的方法、属性和事件

方法
方法描述
addTextTrack()向音频/视频添加新的文本轨道。
canPlayType()检测浏览器是否能播放指定的音频/视频类型。
load()重新加载音频/视频元素。
play()开始播放音频/视频。
pause()pause()
属性
属性描述
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay设置或返回是否在加载完成后随即播放音频/视频。
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls设置或返回音频/视频是否显示控件（比如播放/暂停等）。
crossOrigin设置或返回音频/视频的 CORS 设置。
currentSrc返回当前音频/视频的 URL。
currentTime设置或返回音频/视频中的当前播放位置（以秒计）。
defaultMuted设置或返回音频/视频默认是否静音。
defaultPlaybackRate设置或返回音频/视频的默认播放速度。
duration返回当前音频/视频的长度（以秒计）。
ended返回表示音频/视频错误状态的 MediaError 对象。
loop设置或返回音频/视频是否应在结束时重新播放。
mediaGroup设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。
muted设置或返回音频/视频是否静音。
networkState返回音频/视频的当前网络状态。
paused设置或返回音频/视频是否暂停。
playbackRate设置或返回音频/视频播放的速度。
played返回表示音频/视频已播放部分的 TimeRanges 对象。
preload设置或返回音频/视频是否应该在页面加载后进行加载。
readyState返回音频/视频当前的就绪状态。
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking返回用户是否正在音频/视频中进行查找。
src设置或返回音频/视频元素的当前来源。
startDate返回表示当前时间偏移的 Date 对象。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
volume设置或返回音频/视频的音量。
事件
事件描述
abort当音频/视频的加载已放弃时触发。
canplay当浏览器可以开始播放音频/视频时触发。
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange当音频/视频的时长已更改时触发。
emptied当目前的播放列表为空时触发。
ended当目前的播放列表已结束时触发。
error当在音频/视频加载期间发生错误时触发。
loadeddata当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata当浏览器已加载音频/视频的元数据时触发。
loadstart当浏览器开始查找音频/视频时触发。
pause当音频/视频已暂停时触发。
play当音频/视频已开始或不再暂停时触发。
playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress当浏览器正在下载音频/视频时触发。
ratechange当音频/视频的播放速度已更改时触发。
seeked当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled当浏览器尝试获取媒体数据，但数据不可用时触发。
suspend当浏览器刻意不获取媒体数据时触发。
timeupdate当目前的播放位置已更改时触发。
volumechange 当音量已更改时触发。
waiting当视频由于需要缓冲下一帧而停止时触发。

自定义控制栏

video播放相关的API：
video.duration：整个媒体文件的播放时长，单位s
video.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回true
video.ended ：如果媒体文件播放完毕，则返回true
video.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
video.volume ：在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值
video.muted ：检测当前是否为静音，是则为true；为文件设置静音或消除静音
video.play() ：播放视频文件
video.pause() ：暂停处于播放状态的视频文件
video.canPlayType() ：测试video元素是否支持给定MIME类型的文件

监听事件：
ontimeupdate ：当video.currentTime发生改变时触发该事件

全屏控制API：
video.webkitRequestFullScreen()：全屏显示
document.webkitCancelFullScreen()：退出全屏
document.webkitIsFullScreen：如果当前处于全屏状态，则返回true,否则返回false
document.addEventListener(‘webkitfullscreenchange’, handler)：当在全屏和非全屏状态切换时，触发该事件

更多推荐

算法通关18关 | 回溯模板如何解决复原IP问题

18关的前几篇文章看过之后，对回溯的模板问题基本解题思路就知道了，就是固定的for循环问题，外层for循环控制横向，递归控制纵向，还要考虑撤销操作和元素是否能被重复利用问题，重复利用的情景较少，只用注意撤销就行。1.复原IP地址题目经典题目，LeetCode93有效IP地址正好由四个整数（每个整数位于0到255之间组成

SpringMVC初级

文章目录一、SpringMVC概述二、springMVC步骤1、新建maven的web项目2、导入maven依赖3、创建controller4、创建spring-mvc.xml配置文件（本质就是spring的配置件）5、web.xml中配置前端控制器6、新建a.jsp文件7、配置tomcat8、启动测试三、工作流程分析

保密资质申报条件

一、保密资格等级及认定机关：保密资格分两个级别；一级：可承担一级（绝密级、机密级、秘密级）科研生产任务；二级：可承担二级（机密级、秘密级）科研生产任务；一级保密认定：国家保密委员会（国家保密局、国防科工局、装备发展部）、国防科工局。二级保密资格认定：省保密委员会（省保密局、省国防科工办受理）。注：2021年6月3日，国

Unity中的简单数据存储办法

这段代码演示了Unity中的简单数据存储办法当涉及到不同类型的存储时，下面是一些示例代码来演示在Unity中如何使用不同的存储方法：1.临时存储示例代码（内存变量）：```csharp//定义一个静态变量来存储临时计分publicstaticintscore=0;//在某个事件触发时更新计分publicvoidUpda

腾讯Behaviac Designer 和Unity连调行为树

1.克隆源码https://github.com/Tencent/behaviac/2.编译生成BehaviacDesigner.exe3.找到并打开BehaviacDesigner.exe（先不急着填弹出的路径workspace设置框）4.新建一个Unity空工程，并在此处下载behaviacunitypackage

论文解读 | 基于视觉的水果采摘机器人识别与定位方法研究进展

原创|文BFT机器人01背景在复杂的农业环境中，利用机器视觉及其相关算法可以提高收割机器人的效率、功能性、智能化和远程互动性。对于水果采摘机器人系统来说，主要的挑战包括免提导航和水果定位，以及大多数果园中常见的崎岖地形和大型障碍物。这些挑战会在移动采摘机器人穿越地形时在其视觉系统中引起严重的振动，因此需要采用动态目标跟

信息安全性测试的流程

安全测试一、信息安全性测试的定义软件安全是一个广泛而复杂的主题，每一个新软件都可能存在安全的缺陷，甚至这个缺陷是前所未见的。信息安全性测试的目的在于通过系统的测试，对所测软件提出安全改进建议，帮助用户将风险控制/转移/降低在国家安全标准允许或公众接受的许可范围内。二、信息安全性测试的作用（1）为信息系统安全验收出具报告

让Pegasus天马座开发板实现超声波测距

在完成《让Pegasus天马座开发板用上OLED屏》后，我觉得可以把超声波测距功能也在Pegasus天马座开发板上实现。于是在箱子里找到了，Grove-UltrasonicRanger这一超声波测传感器。官方地址:https://wiki.seeedstudio.com/Grove-Ultrasonic_Ranger超

zabbix介绍及部署（五十一）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档目录一、zabbix的基本概述二、zabbix的构成1、Server2、web页面3、数据库4、proxy5、Agent三、zabbix的监控对象四、zabbix的常用术语五、zabbix的工作流程六、zabbix进程详解七、zabbix的监控框架7.1三

Blender骨骼动画简明教程

Blender是首选的开源3D动画软件之一。令人惊讶的是，开始创建简单的角色动画并不需要太多时间。一旦获得最终的3D角色模型，你就可以使用该软件的众多动画功能和工具将其变为现实。推荐：用NSDT编辑器快速搭建可编程3D场景例如，Blender的绑定工具将帮助你实现角色所需的动作。还可以使用软件的姿势编辑功能添加和操作姿

【Vue】el 和 data短小精湛的细节！

hello，我是小索奇，精心制作的Vue教程持续更新哈，花费了大量的时间和精力，总结拓展了很多疑难点，想要学习&巩固&避坑就一起学习叭~el与data的两种写法el共有2种写法el表达式主要用来在模板中展示数据,它可以输出简单的变量值,也可以调用方法。语法是${表达式}创建Vue实例对象的时候配置el属性先创建Vue实

热文推荐
  1. 【ES6知识】 Reflect 与 Proxy

    文章目录前言一、Proxy代理对象1.1基本应用1.2同一个拦截器函数，可以设置拦截多个操作：1.3Proxy支持的拦截操作一览，一共13种：二、Reflect对象2.1基本使用2.2`Reflect`对象一共有13个静态方法三、使用Proxy实现观察者模式前言Proxy与Reflect是ES6为了操作对象引入的API

  2. 源码编译Qt 5.15.9+msvc2019

    官方文档里给出了详细步骤：BuildingQtSourcesBuildingQt5fromGit(Wiki)注：本文基于windows11+vs2019x64+qt5.15.9，不编译QtWebEngine归纳总结如下：准备阶段QtforWindows-Requirements安装python，我这里用的是anacon

  3. 如何在Vue中引入video.js，并如何监听相关事件,禁止拖拽

    如何在Vue中引入video.js，并如何监听相关事件最近考虑做一个视频播放网站，所以接触video.js会多一些，之前考虑到使用Vue-video-player来实现相关功能，结果发现当前技术已不再支持Flash播放器，无奈采用videojs,官方文档链接奉上Video.js1.Vue使用Video.jsa.引入vi

  4. PDF文件的页眉页脚无法删除的原因和三种替代方法

    大家好！今天六分职场为大家介绍一个PDF的常用操作。有的时候我们需要为PDF文件添加页眉页脚，但如果我们这个PDF文档是从其他地方参考的，经常会发现无法直接编辑或者删除PDF文件中页眉页脚。不用担心，我们使用WPS的PDF软件，有两种替代的方法可以删除PDF的页眉页脚，然后插入自己的页眉页脚。一、PDF页眉页脚无法删除

  5. Windows系统部署WebDAV服务结合内网穿透实现公网访问，轻松共享文件与资源

    windows搭建WebDAV服务，并内网穿透公网访问【无公网IP】文章目录windows搭建WebDAV服务，并内网穿透公网访问【无公网IP】1.安装IIS必要WebDav组件2.客户端测试3.cpolar内网穿透3.1打开Web-UI管理界面3.2创建隧道3.3查看在线隧道列表3.4浏览器访问测试4.安装Raidr

  6. 分布式事物【XA强一致性分布式事务实战、分布式架构的理论知识、TCC核心组成】(六)-全面详解（学习总结---从入门到深化）

    目录XA强一致性分布式事务实战_业务层实现分布式架构的理论知识_BASE理论BASE理论三要素分布式事务解决方案_最终一致性分布式事务最终一致性分布式事务解决方案_TCC是什么TCC核心组成Hmily实现TCC分布式事务实战_认识Hmily-TCCHmily实现TCC分布式事务实战_业务场景介绍XA强一致性分布式事务实

  7. leetcode题目分析(一)leetcode155最小栈

    一、前言本题基于leetcode155最小栈这道题，说一下通过java解决的一些方法。需要尤其注意的是，此题输入的值的区间范围在-2^31<=val<=2^31-1.这将会影响我们最后一种最优解的结果出现问题。这些都是后话。二、解决思路其实在一开始的提交记录，我的方案忽略了题干中的常数时间，而是使用了偏向于工程的，将栈

  8. 经典指标策略回测一览

    编辑经典指标策略回测一览关键词A股市场（沪深京三市）5000+股票20年内日线走势回测，区分除权，前复权，后复权三种模式；由于数据量较大，采用两种方式共享数据，一是天启网站的数据表格可视化，而是phpadmin数据管理台查看（自行SQL查询），登录方式在最下方。1、天启平台登录网站地址天启量化交易平台http://ma

  9. redisplusplus笔记

    设计点在redis层使用函数作为模板类型参数，也就是command层定义的函数。template<typenameCmd,typename...Args>autoRedis::command(Cmdcmd,Args&&...args)->typenamestd::enable_if<!std::is_convertib