HTML5学习之视频与音频(三)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<!-- 当前,video 元素支持三种视频格式:
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 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 文件--> <!-- controls 让浏览器显示视频中的元素-->
<video controls="controls" autoplay="autoplay" loop="loop" id="video1">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen and (min-width:500px) " />
<!--宽度小于500播放下面这个-->
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen" />
Sorry,your browser is unable to play this video.
</video>
<section>
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
</section> <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 = 320;
} function makeNormal() {
myVideo.width = 420;
}
</script> <!--当前,audio 元素支持三种音频格式:
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √-->
<audio src="http://www.w3school.com.cn/i/song.mp3" controls="controls" autoplay="autoplay">
Your browser does not support the audio tag.
</audio>
</body>
</html>
HTML5学习之视频与音频(三)的更多相关文章
- HTML5学习笔记 视频
许多时髦的网站都提供视频.html5提供了展示视频的标准 检测您的浏览器是否支持html5视频 Web上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如Fl ...
- html5中插入视频和音频
<audio src="1.mp3" controls></audio> <video src="1.mp4" controls& ...
- html5学习(二)音频audio
音频格式 当前,audio 元素支持三种音频格式: IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis √ √ √ M ...
- Html5学习进阶一 视频和音频
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式: Internet Explorer Firefox 3.5 Opera 10 ...
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- HTML5 添加视频和音频(响应式视频)
最初的 HTML5规范呼吁所有浏览器内置支持使用 Ogg格式① 直接播放视频或音频(无需插件).但是由于 HTML5工作组的内部争议,曾经作为基线标准的支持 Ogg(包括 Theoravideo 和 ...
- 第181天:HTML5——视频、音频
一.HTML5新增的video.source标签 <video width="320" height="240" controls="contr ...
- 测试开发之前端——No9.HTML5中的视频/音频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
随机推荐
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
- Delphi中window消息截获的实现方式(1)
近来笔者在一个项目中需要实现一个功能:模仿弹出菜单的隐藏方式,即鼠标在窗口的非PanelA区域点击时,使得PanelA隐藏. 经过思考,笔者想到通过处理鼠标的点击事件来实现相应功能.但是,究竟由谁 ...
- POJ 1509 Glass Beads
Description 求字符串的最小循环表示. Sol SAM. 把原串复制一遍,建出SAM,然后每次选最小的一个跑 \(len\) 次,这就是最小循环表示的最后一个节点,然后 \(x-len+1\ ...
- Citrix运行检测出错
Citrix运行检测出错: 出现意外错误.请确认服务器名称正确.服务器已打开.Citrix XenApp 已安装在服务器上并且 Citrix MFCOM 服务正在运行. 看Windows日志出现如下错 ...
- 如何修复IIS7
修复错误 运行命令提示符 fsutil resource setautoreset true c:\ 打开运行输入 services.msc 启动Windows Process Act ...
- igbinary vs serialize vs json_encode
igbinary vs serialize vs json_encode 2010-04-18 @ 23:01:58 · 作者 Volcano · 归类于 php 你可能会感兴趣的内容 关于" ...
- VS 2012: Post build 中使用 Signtool.exe,对于特殊password中字符的处理方法
众所周知,在VS(Visual Studio)里面可以利用post build 进行一些类似于CMD或者批处理的操作. 最近的项目中用到了MicroSoft的SignTool工具,目的是要把一个数字签 ...
- XsltListViewWebPart 和自定义列表视图
http://msdn.microsoft.com/zh-cn/library/ff806162(v=office.14).aspx
- 查看Android应用包名package和入口activity名称
使用android自动化测试工具启动应用时,需要填写被测程序的包名和启动的Activity,以下有两种查看应用包名package和入口activity名称的方法: 方法一:使用aapt //aa ...
- 【转】Git如何Check Out出指定文件或者文件夹
[转]Git如何Check Out出指定文件或者文件夹http://www.handaoliang.com/a/20140506/195406.html 在进行项目开发的时候,有时候会有这样的需求那就 ...