视频格式

当前,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. 使用Gird++打印出现“Retrieving the COM class factory for component with CLSID”的解决办法

    我们的接口需要返回一个gird++生成PDF文件的二进制数据,在本地测试都很好,发布到服务器上一直出现“Retrieving the COM class factory for component w ...

  2. 解决MacOS Terminal打开慢的问题

    用了Mac有一段时间了,突然发现Terminal打开奇慢,每次打开都显示logining...,打开大概要个五六秒的时间,以前打开都是瞬间打开的啊,这对于我们这种追求速度的程序员怎么受的了呢.开始一直 ...

  3. [C#] 后端post的请求方法

    C# 模拟post请求方法 方法1: /// <summary> /// 模拟Post请求 /// </summary> /// <param name="ur ...

  4. isArray

    判断一个玩意是不是数组: (1)新方法:Array.isArray(); (2)旧方法:toString(); <!doctype html> <html lang="en ...

  5. centos6.6安装mysql5.7.6(采用MySQL Yum Repository)—(先看最后一行)

    在centos6.6系统上采用MySQL Yum Repository安装mysql5.7.6: 帮助文档:http://dev.mysql.com/doc/refman/5.7/en/linux-i ...

  6. DatePickerDialog 控制只选择年月或年或月

    etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...

  7. android资料

    http://bbs.51cto.com/thread-903936-1.html http://zhidao.baidu.com/question/195697097.html?sort=4& ...

  8. cf Magic Numbers

    http://codeforces.com/contest/320/problem/A #include <cstdio> #include <cstring> using n ...

  9. hdu 畅通工程再续

    http://acm.hdu.edu.cn/showproblem.php?pid=1875 #include <cstdio> #include <cstring> #inc ...

  10. 自制单片机之十二……AT89C2051烧写器的制做与调试

    现在都用S52了,还用C2051干嘛!价格也差不多.但是C2051的体积要比S51.S52小很多,而且引脚只有20只,在一些简单的控制中,这些引脚已足够了,小的体积更具有优势些.但目前好像还没有支持在 ...