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/视频播放的更多相关文章

  1. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  2. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  3. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

  4. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

  5. 移动端 HTML5 <video> 视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  6. [转]移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  7. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  8. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  9. video视频播放以及主流浏览器兼容

    直接看代码吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  10. webdriver高级应用- 测试HTML5语言实现的视频播放器

    能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...

随机推荐

  1. IntelliJ IDEA删除所有断点

    参考: http://blog.csdn.net/yanziit/article/details/73459795

  2. mysql 源码 jin-yang.github.io

    https://jin-yang.github.io/post/mysql-group-commit.html

  3. java计算年龄

    精确到天计算年龄 public static int getAgeByCardId(String card) throws Exception { Integer len = card.length( ...

  4. 邁向IT專家成功之路的三十則鐵律 鐵律七：IT人效率之道-時間管理

    彷間有許多與時間管理方面的相關書籍與實務課程,但是究竟對於一位IT專業人士來說,甚麼樣的時間管理法則才是最有效率的呢?過去有許多IT朋友私下請教顧大俠這個問題,而顧大俠始終沒有很完整的分享這方面的經驗 ...

  5. 表现层 JSP 页面实现

    一.实验介绍 1.1 实验内容 本节课程主要利用 easyUI 实现系统的前端页面. 1.2 实验知识点 easyUI JavaScript html 1.3 实验环境 JDK1.8 Eclipse ...

  6. poj 2932 Coneology （扫描线）

    题意 平面上有N个两两不相交的圆,求全部最外层的,即不被其它圆包括的圆的个数并输出 思路 挑战程序竞赛P259页 代码 /* ************************************* ...

  7. Mybatis分页插件-PageHelper的使用

    转载:http://blog.csdn.net/u012728960/article/details/50791343 Mybatis分页插件-PageHelper的使用 怎样配置mybatis这里就 ...

  8. Android的logger机制分析

    分析安卓的Logger机制 一.概述 Logger机制是在Android系统中提供的一个轻量级的日志系统,这个日志系统是以驱动程序的形式在内核空间实现的,在用户空间分别提供了Java接口和C/C++接 ...

  9. cvpr2017年的所有论文下载

    wget -c -N  --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla   http://op ...

  10. MVC3-表单

    [.NET Core已取消]Html.BeginForm() 该方法用于构建一个From表单的开始,他的构造方法为:Html.BeginForm("ActionName", &qu ...