<!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. mysql分表研究

    分表是分散数据库压力的好方法. 分表,最直白的意思,就是将一个表结构分为多个表,然后,可以再同一个库里,也可以放到不同的库. 当然,首先要知道什么情况下,才需要分表.个人觉得单表记录条数达到百万到千万 ...

  2. Topology: The Architecture of Distributed Systems--reference

    reference:http://blog.couchbase.com/topology-architecture-distributed-systems You can’t judge a book ...

  3. 在应用程序中操作NorFlash

    相对于操作NandFlash,操作NorFlash相对简单,因为基本不需要考虑坏块,NorFlash也没有OOB区域,也跟ECC没有一毛钱关系.它的读写擦除相对容易. int dealwithnor( ...

  4. Python Counter() 的实现

    Table of Contents 1. collections.Counter 源码实现 1.1. __init__ 1.2. update 1.3. most_common 1.3.1. item ...

  5. n-1位数

    描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的数.   输入 第一行为M,表示测试数据组数.接下来M行,每行包含一个测试数据. 输出 ...

  6. 通过 CALayer 代理方法绘图

    #import "ViewController.h" #define WIDTH 50 #define PHOTO_HEIGHT 150 @interface ViewContro ...

  7. [转]SVN:This client is too old to work with working copy 的解决方案

    前一段时间,我在Eclipse碰到一个SVN错误,出现的原因是我的Eclipse的SVN插件是1.6,服务器的SVN版本是1.5.4,然后我在工程目录下做了一次提交操作(不是Eclipse里),到最后 ...

  8. 【转】ConcurrentHashMap完全解析(JDK6/7、JDK8)

    转自http://my.oschina.net/hosee/blog/675884 并发编程实践中,ConcurrentHashMap是一个经常被使用的数据结构,相比于Hashtable以及Colle ...

  9. CF 163E. e-Government ac自动机+fail树+树状数组

    E. e-Government 题目: 给出n个字符串,表示n个人名,有两种操作: ?string ,统计字符串string中出现的属于城市居民的次数. +id,把编号为id的人变为城市居民,如果已经 ...

  10. 记录一下,关于错误提示:could not find a part of path “X:\”的解决办法

    Win2k在NTFS系统下可能会出现这样的错误提示,解决办法很简单,只要在网站所在系统盘根目录给ASPNET用户读取权限就可以了,因为原因就是 Server.MapPath() 这个方法,这个方法是让 ...