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 标签。

执行如下：

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

2、设置多种格式

您的浏览器不支持 video 标签。

执行如下：

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

标签的属性如下：

controls/controls="controls" 显示播放按钮

autoplay/autoplay="autoplay" 立即播放

loop/loop="loop" 循环播放

muted/muted="muted" 静音

preload/preload="preload" 加载视频d

poster="路径" 显示默认图片

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

播放/暂停

更改大小

您的浏览器不支持 video 标签。

将javascript写在html的下方

var myVideo=document.getElementById("video1");

function playPause()

{

i f (myVideo.paused)

myVideo.play();  //播放

else

myVideo.pause(); //暂停

}

function makeNormal()

{

myVideo.width=420; //自定义宽度，高度自适应

}

执行如下：

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

方法

属性

事件

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 视频和音频的方法属性和事件参考

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

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

HTML5视频Video 音频Audio

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

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

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

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

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

CSS canvas 捕捉视频video元素截图

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

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

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

视频video遇到一些坑

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

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

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

html5视频video积累

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

随机推荐

C#设计模式系列：职责链模式(Chain of Responsibility)

1.职责链模式简介 1.1>.定义 职责链模式是一种行为模式,为解除请求的发送者和接收者之间的耦合,而使多个对象都有机会处理这个请求.将这些对象连接成一条链,并沿着这条链传递该请求,直到有一个对 ...

07@Pattern_Note_命令模式

前言 20160109: 今天开始看命令模式,主要从概念和实现来深入理解该模式 概念理解[部分来自摘录] 概念 通常来说,"行为请求者"与"行为实现者"是紧耦合 ...

电脑安装win8.1后 前面板没有声音的解决办法

解决部分朋友在给电脑新安装win8.1系统后出现耳机插入电脑前面板音频口没有声音的问题 百度经验:jingyan.baidu.com 方法/步骤 1 1.安装声卡驱动(必须安装,否则无法完成设置) 2 ...

BZOJ 1877: [SDOI2009]晨跑(费用流)

看到要求两个量就下意识的想到了费用流= =，先把一个点拆成两个点就能够解决一个的只经过一次的限制 CODE： #include#include

10年java过来人聊聊自己的自学、培训和工作经历

一 . 自我介绍 我叫王涛,我是一位北漂十年的码农,2008年9月份开始自学java,三个月后,自学无果,于2008年11月份开始参加培训,培训完之后,我觉得自己还是啥也不会,只会抄抄代码,竟然连de ...

(转) The Incredible PyTorch

转自:https://github.com/ritchieng/the-incredible-pytorch The Incredible PyTorch What is this? This is ...

android-------高德地图两点路线和多个点路线绘制

最近朋友需要两点路线和多个点路线绘制这个功能,帮忙弄了一下,写这篇博客与大家分享一下. 两点路线 是起点和终点两个经纬度点,高德绘制出路线,可以实现实线和虚线功能 效果图:    相关属性: mPol ...

jenkins调用本地搭建sendmail邮件服务器发送邮件

应用jenkins发送邮件的邮件服务器 SMTP server 可以是本地的,也可以是远程,远程的就不多说了,在此说一下如何在jenkins本地服务器上搭建邮件服务器,并用jenkins发送邮件,详细 ...

inline-block各浏览器兼容以及水平间隙问题解决方案

inline-block属性 This value causes an element to generate a block box, which itself is flowed as a sin ...

002-java语言基础

一.安装卸载 卸载:控制面板 安装:下载对应版本 注意1.安装路径→尽量不要有空格和汉字 注意2.安装之后,jre可以不用安装,jdk中含有 二.环境变量 环境变量:理解,一些快捷路径.方便快速查找应 ...