视频格式

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<video> 标签的属性

属性 描写叙述
autoplay autoplay 假设出现该属性,则视频在就绪后立即播放。

controls controls 假设出现该属性,则向用户显示控件,比方播放button。
height pixels 设置视频播放器的高度。

loop loop 假设出现该属性,则当媒介文件完毕播放后再次開始播放。
preload preload

假设出现该属性,则视频在页面载入时进行载入,并预备播放。

假设使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

实例1

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

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

实例2

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

video 元素同意多个 source 元素。

source 元素能够链接不同的视频文件。

浏览器将使用第一个可识别的格式。

HTML 5 视频使用的更多相关文章

  1. 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...

  2. premere cs4绿色版 安装 并且 视频导出 讲解

    最近室友,开始在玩视频剪辑,用的是 premere cs4 绿色版.让他遇到的最大问题也是我之前遇到的最大问题,就是视频导出. 所以我在这里上传一套自己的一点点经验吧. 接下来,我就总结一下 我是怎么 ...

  3. Power BI官方视频(3) Power BI Desktop 8月份更新功能概述

    Power BI Desktop 8月24日发布了更新版本.现将更新内容翻译整理如下,可以根据后面提供的链接下载最新版本使用. 1.主要功能更新 1.1 数据钻取支持在线版 以前的desktop中进行 ...

  4. 视频 - 在 VirtualBox 中部署 OpenStack

    大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂,难道大今天我就先帮大家解决环境问题.前两天我抽空在 ...

  5. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  6. html5 与视频

    1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg  (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...

  7. 基于RN开发的一款视频配音APP(开源)

    在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...

  8. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  9. duang~免费的学习视频来啦:学霸君之全栈测试

    学霸君向童鞋们推荐一款 同名学霸学习 视频教程 重点是完全免费收看学习噢!!! 今天 学霸君推荐腾讯课堂的学霸君之全栈测试 复制下方链接至腾讯课堂中报名学习 https://ke.qq.com/cou ...

  10. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

随机推荐

  1. Webstorm10.0.3破解程序及汉化包下载、Webstorm配置入门指南

    核心提示: WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscri ...

  2. 禁止chrome中CORS跨域资源共享错误

    在开发中,可以通过命令行命令chrome --allow-file-access-from-files来 禁止CORS错误. 只在紧急情况下使用这个方法,比如你的老板正站在你身后, 并且所有事情都无法 ...

  3. 截取字符串 substring substr slice

    截取字符串   substring 方法用于提取字符串中介于两个指定下标之间的字符  substring(start,end) 开始和结束的位置,从零开始的索引 参数     描述 start     ...

  4. UVA10090 数论基础 exgcd

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. (原)torch的apply函数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221633.html torch中的apply函数通过可以不断遍历model的各个模块.实际上其使用的 ...

  6. SVG基础

    可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准.SVG 是使用 ...

  7. Guava API学习之Multimap

    相信大家对Java中的Map类及其之类有大致的了解,Map类是以键值对的形式来存储元素(Key->Value),但是熟悉Map的人都知 道,Map中存储的Key是唯一的.什么意思呢?就是假如我们 ...

  8. vagrant 配置文件简析

    #自定义box名字 config.vm.box = "website" #以ip192.168.33.10访问 config.vm.network "private_ne ...

  9. Python新手学习基础之初识python——与众不同1

    Python是什么? 首先我们先简单介绍下python这门语言,Python是一种解释性的脚本语言,它不需要像C/C++那样先编译再执行,也不像JS那样可以在浏览器上直接执行.它为我们提供的基础代码库 ...

  10. storyboard和xib的区别

    storyboard只是算是帮你布局,流程什么的,xib的另一种形势,比xib功能多,但是和分享完全没有半点关系 你暂时可以理解为高级xib