html5学习(一) video字段
html5对视频的支持：
html5通过<video></video>字段实现web页面上视频的播放功能。
目前各大浏览器对<video>字段的支持：
当前，video 元素支持三种视频格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
简单的html显示视频的例子
<!DOCTYPE HTML>
<html>
<body> <video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video> </body>
</html>
src:指定视频资源的位置（包括相对地址以及绝对地址）。
control 属性供添加播放、暂停和音量控件。
此处注意视频格式
<video> 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
<!DOCTYPE html>
<html>
<body> <div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div> <script type="text/javascript">
var myVideo=document.getElementById("video1"); function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
} function makeBig()
{
myVideo.width=560;
} function makeSmall()
{
myVideo.width=420;
} function makeNormal()
{
myVideo.width=520;
}
</script> </body>
</html>
| 方法 | 属性 | 事件 |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
通过mvideo的play或者pause判断视频是否在播放或者暂停。
html5学习(一) video字段的更多相关文章
- HTML5学习笔记-video
HTML5 <video> - 方法.属性以及事件 方法 play()——播放 pause()——暂停 load()——加载 canPlayType——检测您的浏览器是否能播放不同类型的视 ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML5学习笔记（四）：H5中表单新增元素及改良
方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...
随机推荐
- php 分析
php code in D:\10\11\php test in D:\10\11\php\test issue 1: <html><head><title>标记 ...
- Spring MVC（一）
MVC这种设计模式,不光运用于Web领域,而且也能用于非Web领域,MVC特指一种表现层设计模式,不限于Java语言 spring mvc属于spring框架的后续产品,用在基于MVC的表现层开发,类 ...
- HDU2639[背包第K大]
题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=2639] 题意:求第k大背包. 题解:利用二路归并的思想,求解第K大的值. #include<bi ...
- Python第一天课程
1.在linux下写python脚本,开头的解释器宣告的写法应该是#!/usr/bin/env python 定义变量name="XXX" age=21 所有使用引号引起的内 ...
- 2017-1-15-libubox analysis
2017-1-15-libubox analysis libubox utils.h utils.h 提供了一些简单的实用工具函数.比如大小端转换,位图操作,编译器属性的封装,连续内存申请函数call ...
- 第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- POJ 2656 Unhappy Jinjin
#include <stdio.h> int main() { ) { int i, n; ; scanf("%d", &n); ) break; ; i &l ...
- 第六十五，html嵌入元素
html嵌入元素 学习要点: 1.嵌入元素总汇 2.嵌入元素解析 本章主要探讨HTML5中嵌入元素,嵌入元素主要功能是把外部的一些资源插入到HTML中. 一．嵌入元素总汇 ...
- Effective JavaScript ：第二章
1.熟练掌握闭包 理解闭包要学会三个基本的事实: ①JavaScript允许你引用在当前函数以外定义的变量: 例如: function makeSandwich(){ var magicIngredi ...
- Qml 定义 constant
对于程序中一些常量如字符串, 实数等, C++中经常用的方法, 是定义全局常量: 或者把所有意义相近的常量用一个单例类收集起来. QML是类JSON的标识性语言, 使用js 语法去操作对象. 在QML ...