HTML5-Video（视屏播放）

Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

HTML5加载视屏

如需在 HTML5 中显示视频，您所有需要的是：

<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

说明：

  • <video> 元素提供了 播放、暂停和音量控件来控制视频。
  • 同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
  • <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
  • <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前， <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> 元素，读取并设置属性，以及如何调用方法。

<body><video id="video_demo" width="300" height="250" controls="">//它会寻找能播放的第一个资源<source src="img/millets.mp4" type="audio/mp4"></source><source src="img/millets.ogg" type="audio/ogg"></source>您的浏览器不支持 HTML5 video 标签。</video><br /><div style="text-align: center"><button onclick="playpause()">暂停/播放</button><button onclick="makeBig()">放大</button><button onclick="makeSmall()">缩小</button><button onclick="makeNormal()">普通</button></div><script>var _video = document.getElementById("video_demo");//播放或暂停function playpause() {if(_video.paused) {_video.play();} else {_video.pause();}}//放大function makeBig() {_video.width = 500;_video.height = 400;}//缩小function makeSmall() {_video.width = 200;_video.height = 100;}//普通function makeNormal() {_video.width = 300;_video.height = 250;}</script></body>

HTML5 Video 标签

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

HTML5-Video（视屏播放）相关推荐

  1. video 视屏播放器详细控制

    介绍 canplay.play.pause是video提供的API,在视频加载完成后需要设置视频的总时长duration也是来源于自身的API但是需要格式化时间 设置当前播放时间通过自身API,cur ...

  2. Android 实现视屏播放器、边播边缓存功能，附源码

    热文导读 | 点击标题阅读 ［墙裂推荐］AndroidVideoCache:实现视屏播放边下边播 吊炸天!74款APP完整源码! 一份年薪30万的Android面试宝典,附答案 来源:http://w ...

  3. Android 实现视屏播放器、边播边缓存功能、外加铲屎(IJKPlayer)(转载)

    转载自:<Android 实现视屏播放器.边播边缓存功能.外加铲屎(IJKPlayer)> hello,大家好,我就是那个会掀桌子的话唠,刚刚结束两篇关于音频播放与录制的文章,旧坑未埋就挖 ...

  4. 使用java创建一个简易的视屏播放器

    最近有个多媒体的作业,要求使用visualC++和opencv编写一个简易的视屏播放器,对于C/C++残疾者而言是不可能的,于是萌生了用java编写的想法.具体经验分享一下. 目标:制作简易视屏播放器 ...

  5. Unity 视屏播放插件AvProVideo-鼠标控制播放、暂停和更换视频！

    Unity学习 - 视屏播放插件AvProVideo-鼠标控制播放.暂停和更换视频! 一:前言 二:效果图 三:插件资源下载 四:资源导入程序 五:手机上在线播放视频 六:Demo下载 七:关注公主号 ...

  6. HTML5 video标签的播放控制

    转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...

  7. iOS 视屏播放软件（AVPlayer）

    已经封装好,一句代码就能使用视屏播放. 点这里下载,记得给个Star

  8. html5 video 定位播放,HTML5 video标签的播放控制

    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...

  9. java 生成media_使用java创建一个简易的视屏播放器

    最近有个多媒体的作业,要求使用visualC++和opencv编写一个简易的视屏播放器,对于C/C++残疾者而言是不可能的,于是萌生了用java编写的想法.具体经验分享一下. 目标:制作简易视屏播放器 ...

  10. 视屏播放_使用原生MediaPlayer+TextureView实现全屏、小窗口、视频列表、m3u8监控播放

    Android 视屏播放器----MediaPlayer+TextureView实现全屏.小窗口.视频列表播放 标签(空格分隔): 视屏播放器 一.效果图 二.集成步骤 按文件目录复制进自己项目[文件 ...

最新文章

  1. 汽车与智能家居互联时代 语音控制很关键
  2. Eclipse ADT 21 Preview 10 发布
  3. SUSE Linux ntp 升级报错（MAKE [1]:*** 【all】Error 2）
  4. mysql 精度_mysql-笔记 精度
  5. 【Python】模拟面试技术面试题答
  6. sql mysql assoc和row_mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
  7. 佩奇扑街、外星人疯狂！Python 告诉你大年初一应该看哪部电影？
  8. Log4Net Layout使用以及扩展
  9. tinycc update VERSION to 0.9.27
  10. 题目1003：A+B 使用大数相加方法解法
  11. 集成电路那些事儿：CMOS模拟集成电路版图基础
  12. FFmpeg常用命令
  13. 移动端UML图应用之UML图简述
  14. SMART PLC PID仿真 (SMART PID仿真库使用说明)
  15. IRS2110S+IGBT半桥驱动调试问题记录
  16. 计蒜客 - T1212 仙岛求药 BFS+DFS剪枝
  17. 吴永祥：政府大数据服务平台建设之道
  18. Data Structure - Pairing Heap (Java)
  19. Win10设置系统补丁更新服务器,win10系统手动更新补丁如何设置 win10系统手动安装更新方法...
  20. SharePoint站点图片轮转器imageRotator

热门文章

  1. 漫画：什么是图的最小生成树？
  2. WifiConfigManager NetworkSelector 和 WifiConnectivityManager
  3. live555 linux 编译
  4. Dos系统功能调用表9号功能
  5. 树的最大独立集详解（C++）
  6. 计算机组成原理----Cache主存地址映射（计算题）
  7. java 集合工具类_Java 集合 Collections工具类
  8. python 自动打开登陆应用编码_Python+tkinter模拟“记住我”自动登录实例代码
  9. 鸿蒙系统为什么腾讯,鸿蒙系统发布，为什么有人说其为安卓换壳？
  10. 计算机一直在启动修复怎么关机,电脑开机总是要启动修复修复后重启还要修复怎么处理方法...