video 元素支持三种视频格式

IE Firefox Opera Chrome Safari
带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 No 3.5+ 10.5+ 5.0+ No
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 9.0+ No No 5.0+ 3.0+
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 No 4.0+ 10.6+ 6.0+ No

1、设置一个ogg格式的文件

<video src="movie.ogg"  controls="controls" height="200px" width="300px">
您的浏览器不支持 video 标签。
</video>

执行如下:

当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”

2、设置多种格式
<video width="320" height="240" poster="Suk.png" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

执行如下:

如上图为视频设置一个默认图片。也可以添加其他属性。

<video> 标签的属性如下:

controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片

3、自定义播放暂停及大小(Video + DOM)

<button onclick="playPause()">播放/暂停</button>
  <button onclick="makeNormal()">更改大小</button>

<video id="video1" width="200">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

将javascript写在html的下方

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{
   i f (myVideo.paused)
       myVideo.play();  //播放
   else
      myVideo.pause(); //暂停
}

function makeNormal()
{
    myVideo.width=420; //自定义宽度,高度自适应
}
</script>

执行如下:

大多数浏览器支持的视频方法、属性和事件(日后在做理解)

方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth立即执行--视频元素前执行 progress
canPlayType() videoHeight立即执行--视频元素前执行 error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

下方为html5 视频和音频的方法属性和事件参考

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

HTML 5 视频(video)的更多相关文章

  1. (Python基础教程之二十二)爬虫下载网页视频(video blob)

    Python基础教程 在SublimeEditor中配置Python环境 Python代码中添加注释 Python中的变量的使用 Python中的数据类型 Python中的关键字 Python字符串操 ...

  2. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  3. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  4. HTML5无插件多媒体Media——音频audio与视频video

    文件日志地址  http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...

  5. CSS canvas 捕捉视频video元素截图

    video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...

  6. 【转】Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  7. 视频video遇到一些坑

    1.video层级最高问题 解决方案思路:当点击其他按钮触发事件时,视频层级挡住其他外层,比如会挡住弹窗,这是应该让视频暂停播放且隐藏,这是视频这个地方会空一个位置可以放一张封面占位,这样就解决视频层 ...

  8. html5之音频、视频(video&audio)

    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...

  9. html5视频video积累

    又是好几个月没有写东西,还是太懒散了~必须要教育下自己罗~ 这次做了个播放视频的移动H5,之前没有仔细玩过,好好记录下基本知识,还有遇到的一些坑,方便之后再次遇见后进行解决 一.基本 video标签在 ...

随机推荐

  1. [Data Structure] Bit-map空间压缩和快速排序去重

    Bit-map是一种很巧妙的数据存储结构.所谓的Bit-map就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据,可以大大节省存储空间.Bit-ma ...

  2. eclipse version

    查看Eclipse的版本号: 1. 找到eclipse安装目录 2. 进入readme文件夹,打开readme_eclipse.html 3. readme_eclipse.html呈现的第二行即数字 ...

  3. PHP curl获取页面内容,不直接输出到页面,CURLOPT_RETURNTRANSFER参数设置

    使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的或true. 1.curl获取页面内容, 直接输出例子: <?php $ ...

  4. 使用bootstrap tooltip控件动态修改提示内容

    初始化控件之后即使修改了元素的title内容也不会更改提示信息,比如下面 $(element).attr('title','XXXXXX') 这样只会增加一个原生的title提示,如果保持原样显示必须 ...

  5. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  6. 【krpano】浏览点赞插件1.1(源码+介绍+预览)

    插件使用说明详见:http://www.cnblogs.com/reachteam/p/5479068.html 插件更新 1.新增测试模式 用户可以使用uid="test"进行本 ...

  7. 【安装Nodejs】CentOS7 下安装NodeJs+Express+MongoDB+Redis

    最近想拿NodeJS做个文档管理系统玩玩,看看mongdb的gridfs效率咋样,谁晓得因为一个Yeoman的脚手架,整来整去的把文件权限全部搞乱,一想算了,还是重来搞一套吧! 1.安装  yum i ...

  8. (分享) git详解

    今天学了下git  http://blog.jobbole.com/78960/   他写的超级好的 之前也弄过,在eclipse上有个关于github的一个插件,可以通过github的仓库地址把ec ...

  9. 如何使用Android JetPlayer类

    在Android中,还提供了对Jet播放的支持,Jet是由OHA联盟成员SONiVOX开发的一个交互音乐引擎.其包括两部分:JET播放器和JET引擎.JET常用于控制游戏的声音特效,采用MIDI(Mu ...

  10. 【CentOS】虚拟机网络配置与远程登录

    ////////////////////////////////////11月16日更新////////////////////////////////////////////////////// 一 ...