<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>HTML5-Video & Audio</title>

    </head>

    <body>

        <div style="text-align:center;">

            <button onclick="playPause()">播放/暂停</button>

            <button onclick="makeBig()">大</button>

            <button onclick="makeNormal()">中</button>

            <button onclick="makeSmall()">小</button>

            <br />

            <!-- 视频 -->

            <!--使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。-->

            <video id="video1" width="320" style="margin-top:15px;" controls="controls">

                <source src="movie.mp4" type="video/mp4" />

                <source src="movie.ogg" type="video/ogg" />

                <source src="movie.webm" type="video/webm" />

                <object data="movie.mp4" width="320" height="240">

                    <embed src="movie.swf" width="320" height="240" />

                </object>

                Your browser does not support HTML5 video.

            </video>

            <br />

            <!-- 音频 -->

            <audio controls="controls">

                <source src="song.ogg" type="audio/ogg">

                <source src="song.mp3" type="audio/mpeg">

                Your browser does not support the audio tag.

            </audio>

        </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 = 320;

            }

            function makeNormal() {

                myVideo.width = 420;

            }

        </script>

    </body>

</html>

HTML5-Video & Audio的更多相关文章

  1. HTML5 Video/Audio播放本地文件

    这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...

  2. html5 video/audio 标签

    一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...

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

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

  4. HTML5 音频 <audio>

    HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

  5. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  6. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  7. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  8. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  9. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  10. 网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

随机推荐

  1. Disruptor 源码阅读笔记--转

    原文地址:http://coderbee.net/index.php/open-source/20130812/400 一.Disruptor 是什么? Disruptor 是一个高性能异步处理框架, ...

  2. IDEA社区版运行并发布web项目

    IDEA社区版相对收费版少了很多功能,其中包括tomcat等web服务器的支持.网上大部分的IDEA web应用发布教程都是基于收费版的,社区版并没有这么直接的图形化工具可以运行或发布web应用.幸运 ...

  3. C++字符串处理封装类String

    概述 C++在处理字符串时相对于python等脚本语言并没有什么优势,下面将常用的字符串处理函数封装成一个String工具类,方便以后使用,后期还会对该类进行扩充,下面是具体的实现: // Strin ...

  4. 简要地写出一个.NET Remoting的示例

    在VS 2008中添加新的类库项目,并命名为NetRmClass,将所属解决方案命名为NetRm,勾选“创建解决方案的目录”.这样,NetRmClass类库项目目录即属于NetRm解决方案,并可以继续 ...

  5. 手机APP软件使用说明

    手机APP软件使用说明 一.            POLYCOM客户端(视频会议终端)登录: 1. 打开手机,找到Polycom软件,点击打开. 2. 打开软件后,界面如下,每次开会时,由会议管理员 ...

  6. Python练习题 025：判断回文数

    [Python练习题 025] 一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. ---------------------------------------- ...

  7. Redis缓存异常的容错实现方法( .net)

    using DotNet.Log; /// <summary> /// Redis缓存辅助类 /// /// 修改纪录 /// /// 2015-10-26 版本:1.0 SongBiao ...

  8. Flask-在浏览器中直接显示文本文件中的内容

    目录结构: project├── info.json├── run.py└── static       └── readme.txt # 直接返回static目录下的文件内容 @app.route( ...

  9. 正则转nfa：bug出现。

    本人写的一个正则到nfa的bug 刚写完前面的那篇,自己用脑子过了一下,发现了一个bug.具体情况如下. 这个bug的产生条件是多次调用假名的时候,每次调用都会修改假名的nfa图.直接这么说不好理解, ...

  10. UISearchDisplayController隐藏navigationBar需注意

    不能调用self.navigationController.navigationBar.hidden = YES: 调用此代码的话,你隐藏了navigationBar搜索展示控制器就拿不到导航条:就会 ...