<!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学习之视频与音频(三)的更多相关文章

  1. HTML5学习笔记 视频

    许多时髦的网站都提供视频.html5提供了展示视频的标准 检测您的浏览器是否支持html5视频 Web上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如Fl ...

  2. html5中插入视频和音频

    <audio src="1.mp3" controls></audio> <video src="1.mp4" controls& ...

  3. html5学习(二)音频audio

    音频格式 当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   M ...

  4. Html5学习进阶一 视频和音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式:   Internet Explorer Firefox 3.5 Opera 10 ...

  5. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  6. HTML5 添加视频和音频(响应式视频)

    最初的 HTML5规范呼吁所有浏览器内置支持使用 Ogg格式① 直接播放视频或音频(无需插件).但是由于 HTML5工作组的内部争议,曾经作为基线标准的支持 Ogg(包括 Theoravideo 和 ...

  7. 第181天:HTML5——视频、音频

    一.HTML5新增的video.source标签 <video width="320" height="240" controls="contr ...

  8. 测试开发之前端——No9.HTML5中的视频/音频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  9. 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 ...

随机推荐

  1. BZOJ 1090: [SCOI2003]字符串折叠

    Sol 区间DP. 转移很简单,枚举会形成的断长转移就行,话说上一题我就跟这个是差不多的思路,转移改了改,然后死活过不了... 同样都是SCOI的题...相差4年... Code /********* ...

  2. Android的一种MVP模式框架

    今天给大家分享的是一种将view的初始化和逻辑与activity分离的架构,采用的是mvp模式.但令人遗憾的是,这仅仅是一个新的思路,我在实际使用中发现其并不能完全将UI逻辑与activity分开,所 ...

  3. mysql远程登录权限修改ubuntu

    mysql默认只允许在localhost主机登录,如果想要通过远程登录管理,需要修改相应的权限. 方法一 首先:开启mysql所在主机的3306端口,或者关闭防火墙. service iptables ...

  4. django formset bug?

    碰到了一个郁闷的问题,修改inlineformset时,全部删掉子表,再新增一行时,报错. 背景: 用django配合jq做动态表格,实现用js动态添加/删除行,并通过inlineformset更新到 ...

  5. PHP socket编程需要了解的一些基本知识

    前面讲到了 fsockopen 的各种情况,其中涉及了很多其它知识,比如chunked分段传输,Keep-Alive,HTTP头字段等额外的知识,如果对这些知识一知半解,会影响对 PHP 的 sock ...

  6. iOS 深入理解UINavigationController 和 UIViewController 之间的关系

    创建三个类 BasicViewController : UIViewController SecondViewController : UIViewController ThirdViewContro ...

  7. STL 阅读(浅析)

    写的不错,决定那这个看下.看的还是晕. http://luohongcheng.github.io/archives/

  8. JDK1.7 中的HashMap源码分析

    一.源码地址: 源码地址:http://docs.oracle.com/javase/7/docs/api/ 二.数据结构 JDK1.7中采用数组+链表的形式,HashMap是一个Entry<K ...

  9. PLSQL

    select t.*,rowid from Table t; 编辑器设置

  10. Mysql 基础2

    创建数据库:     create  database/*条件*/+ text3/*数据库名称*/ 创建数据库  步骤:查询   创建查询  查询编辑器 (写代码) 删除数据库: drop datab ...