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. sqlplus连接oracle失败分析和解决

    背景: 多台Linux服务器需要安装Oracle客户端,实现和Oracle数据库连接做业务处理. 安装完第一台后,直接将安装的目录压缩并复制到其他几台机器上,启动sqlplus连接数据库时,一直提示输 ...

  2. composer的安装以及laravel框架的安装(一)

    laravel号称世界上最好的php框架,没有之一,下面介绍它的安装 laravel学习交流qq群:293798134 composer的安装 : php开发者很多,并且在web开发领域占据绝对统治地 ...

  3. myBatis学习笔记

    java.lang.NullPointerException at cn.itcast.mybatis.dao.UserDaoImpl.findUserById(UserDaoImpl.java:22 ...

  4. MySQL SQL优化

    一.优化数据库的一般步骤: (A) 通过 show status 命令了解各种SQL的执行频率. (B) 定位执行效率较低的SQL语句,方法两种: 事后查询定位:慢查询日志:--log-slow-qu ...

  5. 双系统Ubuntu分区扩容过程记录

    本人电脑上安装了Win10 + Ubuntu 12.04双系统.前段时间因为在Ubuntu上做项目要安装一个比较大的软件,导致Ubuntu根分区的空间不够了.于是,从硬盘又分出来一部分空间,分给Ubu ...

  6. Java 23种设计模式 (通俗易懂解释收集整理)

    (补充中...) P02 抽象工程模式 P14 TemplateMethod 模板方法模式 讲清楚了为什么叫做模板方法  http://www.cnblogs.com/java-my-life/arc ...

  7. r-cnn学习(四):train_faster_rcnn_alt_opt.py源码学习

    论文看的云里雾里,希望通过阅读其代码来进一步了解. 参考:http://blog.csdn.net/sloanqin/article/details/51525692 首先是./tools/train ...

  8. 音频指纹(Philips)

    参考<A Highly Robust Audio Fingerprinting System> Philips 音频指纹提取流程: 仿真效果: 第一个图为歌曲1的第一个指纹. 第二个图为歌 ...

  9. js获取网站项目根路径

    //js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost ...

  10. WPF 线程 Dispatcher

    WPF 应用程序从两个线程开始: 一个用于处理呈现 一个用于管理 UI 呈现线程有效地隐藏在后台运行,而UI线程则接收输入.处理事件.绘制屏幕以及运行应用程序代码. 大多数应用程序都使用一个 UI 线 ...