html5--4-1 video/视频播放
html5--4-1 video/视频播放
学习要点
- 掌握video元素的基本用法
直到现在,在网页中的大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法,这样播放视频就不必依赖外部插件
在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识,有兴趣的朋友可以去查阅相关资料。我们重点学习video和audio两个元素的使用。
目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同,但是这个支持是动态变化的。
当前,video 元素支持三种视频格式:
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
支持的浏览器有:Firefox、Opera、Chrome
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
支持的浏览器有:IE9+、Chrome、Safari
虽然目前应用较广,单有专利保护,是收费在
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
支持的浏览器有:Chrome、Opera、Safari
专门为网页传播而设计在,清晰度高,压缩率也很高,并且开源免费,未来可能会成为主流。目前国外大在视频网站很多采用
video元素的属性
属性 | 属性值 | 描述 |
---|---|---|
src | url | 要播放的视频的 URL地址。 |
width | 正整数/百分比 | 设置视频播放器的宽度。 |
height | 正整数/百分比 | 设置视频播放器的高度。 |
autoplay | 空值/autoplay | 视频在就绪后自动播放。 |
loop | 空值/loop | 循环播放。 |
control | 空值/controls | 向用户显示控件,比如播放按钮 |
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="res/video.mp4" controls="">
你的浏览器暂不支持HTML5的vedio元素!
</video><br><br>
<video src="res/video.webm" controls="">
你的浏览器暂不支持HTML5的vedio元素!
</video>
</body>
</html>
html5--4-1 video/视频播放的更多相关文章
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- Chrome/Chromium HTML5 video 视频播放硬件加速
Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...
- HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...
- 移动端 HTML5 <video> 视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- [转]移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- video视频播放以及主流浏览器兼容
直接看代码吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- webdriver高级应用- 测试HTML5语言实现的视频播放器
能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...
随机推荐
- 解决.NET Core MVC 视图中的中文被html编码的问题
在 .net core mvc 视图输出 变量的时候 默认使用的是 UnicodeRanges.BasicLatin 进行的编码 所以 输出中文后在查看源码的时候是进过编码了的 . 解决方案 在 ...
- 邁向IT專家成功之路的三十則鐵律 鐵律二十七 IT人夢想之道-實踐
有句話說:「人因夢想而偉大」.身為IT的您不知道夢想為何?是希望能夠環遊世界.開一間咖啡廳.買一部法拉利跑車.買一部重機.中大樂透頭彩.娶心目中的女神當老婆,還是只要明天還能活著就好了.無論您的夢想為 ...
- 邁向IT專家成功之路的三十則鐵律 鐵律九:IT人社群互動之道-縮小自己
身為一位專業的IT人士所要學習的東西實在非常的多,然而對於時間相當有限的我們,最快速的學習方法就是向他人學習,而向他人學習的首要態度就是「縮小自己」.唯有將自己縮小到別人的眼睛裡,才能夠讓他們真心誠意 ...
- Unity -- 入门教程二
为了接下来要做的小游戏,在这里我要小小的修改一下移动的代码. public class PlayerMove : MonoBehaviour { //定义移动的速度 public float Move ...
- tensorflow提示出错'module' object has no attribute 'pack'
编译旧的代码,会像下面这样提示出错: deconv_shape3 = tf.pack([shape[0], shape[1], shape[2], NUM_OF_CLASSESS]) Attribut ...
- Geometry Shader 【转】
Geometry shader – receives as its input complete primitives as a collection of vertices, and these i ...
- Adam:大规模分布式机器学习框架
引子 转载请注明:http://blog.csdn.net/stdcoutzyx/article/details/46676515 又是好久没写博客,记得有一次看Ng大神的訪谈录,假设每周读三篇论文, ...
- C#复习总结6 (需要进一步复习)
第十七章 泛型 什么是泛型 泛型是为了适应多种不同种类的数据类型而存在的.有了它之后,我们可以不用为不同的数据类型而单独写一个适配.这样很麻烦. 类型不是对象,而是对象的模板.泛型类型也不是类型,而是 ...
- adb命令具体解释(二)——手机缺失sqlite3时操作数据库的多种解决方式
在android应用开发无处不在SQLite数据库的身影.那么在开发中怎么使用adb命令操作数据库的功能呢? 以下我们将完整的介绍与数据库操作相关的命令集及当手机缺少sqlite3的时候的多种解决方式 ...
- 数据结构与算法——AVL树类的C++实现
关于AVL树的简单介绍能够參考:数据结构与算法--AVL树简单介绍 关于二叉搜索树(也称为二叉查找树)能够參考:数据结构与算法--二叉查找树类的C++实现 AVL-tree是一个"加上了额外 ...