HTML5 Video(视频)

这篇具有很好参考价值的文章主要介绍了HTML5 Video(视频)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

视频格式与浏览器的支持

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

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES
  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。

例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。

实例 1

为视频创建简单的播放/暂停以及调整尺寸控件:

播放/暂停 放大 缩小 普通
 

上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。

尝试一下 »

更多参考请查看 HTML5 Audio/Video DOM 参考手册。


HTML5 Video 标签

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

HTML5 Audio(音频)

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

 

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件


音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:文章来源地址https://www.toymoban.com/news/detail-822886.html

浏览器 MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES YES YES

音频格式的MIME类型

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio 标签

标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用

到了这里,关于HTML5 Video(视频)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5中使用video标签

    隐藏下载: nodownload 隐藏播放速度: noplaybackrate 隐藏画中画: disablePictureInPicture=\\\"true\\\" 隐藏三个点: controlslist=\\\"nodownload noplaybackrate\\\" 隐藏音量按钮:

    2024年02月07日
    浏览(50)
  • html5 video/audio 监听事件属性及方法

       

    2024年02月15日
    浏览(61)
  • 【温故而知新】HTML5的Video/Audio

    HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点: 新增语义元素 :HTML5引入了许多新的语义元素,如 header、footer、article、section 等,这些元素有助于提高网页的结构化和可访问性。 媒体支持 :HTML5引入了 audio 和

    2024年01月21日
    浏览(131)
  • HTML5中video元素事件详解(实时监测当前播放时间)

    video后边几个元素,可处理ios 系统的兼容性 事件 描述 loadstart 浏览器开始在网上寻找媒体数据 progress 浏览器正在获取媒体数据 suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束 abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的

    2024年02月08日
    浏览(61)
  • 前端之html5

    html5优势:     语义化标签:             布局标签:              状态标签:         列表标签:        文本标签:          表单控件:         视频标签:          音频标签:         全局属性: article和section区别: 兼容性处理:            1 针对javascr

    2024年02月13日
    浏览(48)
  • html5——前端笔记

    html页面: !DOCTYPE 不是一个 HTML 标签,它就是 文档类型声明标签,这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页 声明位于文档中的最前面的位置,处于 标签之前。 不是一个 HTML 标签,它就是 文档类型声明标签。 lang 语言种类,用来定义当前文档显示的语言。

    2024年02月10日
    浏览(41)
  • 前端学习——HTML5

    新增布局标签 新增状态标签 新增列表标签 新增文本标签 新增表单控件属性 input新增type属性值 新增视频标签 新增音频标签

    2024年02月12日
    浏览(57)
  • html5前端学习

    定义HTML文档,浏览器看到后就明白这个是HTML文档,所以其他元素要包裹在它里面,标签限定了文档的开始点和结束点。 head标签用于定义文档的头部,描述了文档的各种属性和信息,包括文档的标题、在Web的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会

    2024年02月08日
    浏览(52)
  • 前端开发基础(HTML5 + CSS3)【第一篇】:HTML标签之文字排版、图片、链接、音频、视频 && 涵盖了两个综合案例 做到了基础学得会,实战写的出

    点击前往前端开发基础专栏: 一、开发环境搭建 这里google浏览器不能用我们就使用电脑自带的微软浏览器就可以了! 下载 VS Code VS Code 官网下载地址 这里根据自己电脑的操作系统进行下载! 安装步骤如下: (是在不知道如何操作,可以找个教程一步一步来) 安装这个还是

    2024年04月16日
    浏览(63)
  • html5前端学习2

    一篇思维题题解: 第五周任务 [Cloned] - Virtual Judge (vjudge.net) K - Summer Vacation-CSDN博客  快捷键: Ctrl+Alt+Down        向下选取 Ctrl+Alt+Up             向上选取(会出现多个光标,可以同时输入) Ctrl+Enter                无论光标在哪个位置,都向下换行,与Enter有区别 链接分

    2024年02月10日
    浏览(99)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包