<!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 4579: [Usaco2016 Open]Closing the Farm

    Description 依次删去一个点和它的边,问当前图是否连通. Sol 并查集. 倒着做就可以了. 每次将一个点及其的边加入,如果当前集合个数大于 1,那么就不连通. Code /******** ...

  2. net-snmp源码VS2013编译添加加密支持(OpenSSL)

    net-snmp源码VS2013编译添加加密支持(OpenSSL) snmp v3 协议使用了基于用户的安全模型,具有认证和加密两个模块. 认证使用的算法是一般的消息摘要算法,例如MD5/SHA等.这 ...

  3. linux——基本配置

    环境:Ubuntu 12.04.2 LTS (GNU/Linux 3.5.0-23-generic i686) 网络配置 #临时改变 #修改IP和子网掩码 sudo ifconfig eth0 192 ...

  4. NET程序内存分析工具CLRProfiler的使用（性能测试）

    http://blog.csdn.net/wy3552128/article/details/8158938 大家都知道.net有一套自己的内存(垃圾)回收机制,除非有一些数据(方法)长期占有内存不随 ...

  5. 7.31 签到，js 全局预处理笔记

    js 解析与执行过程: 一.全局:  1.预处理阶段 : 1.LexicalEnviroment === window {1.预处理 var   |   2.function xxx //预处理申明的 ...

  6. poj 1011

    http://poj.org/problem?id=1011 这是一道POJ的搜索的题目,最开始确实难以理解,但做过一些搜索的题目后,也没那么难了. 大概题意就是,现在有N根木头,要拼成若干根木头,并 ...

  7. php在没用xdebug等调试工具的情况下如何让调试内容优雅地展现出来？--php数组格式化

    不知道各位猿猿们有没有碰到过类似的情况.装的PHP环境没有xdebug,而又经常用到数组.调试的时候也需要经常查看数组的结构和字段内容,用var_dump打印出来的数组内容总是杂乱无章.实在无法忍受, ...

  8. YY 神曲 李明霖 14部合集

    http://pan.baidu.com/s/1i5JIvXV

  9. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  10. IT笔试题

    史上最发散的软件工程师笔试题 1.请编写代码实现如下逻辑:有一只猫和多只老鼠,猫叫了一声,老鼠都吓跑了. 2.请介绍一种数据结构和算法,代表你在这个领域的能力. 3.请从正反两面介绍一下你对代码质量的 ...