Video

<video width="500px" controls="controls">
<source src="test.ogg" type="video/ogg" />
你的浏览器不支持video
</video>

控件是可以隐藏的,可以自定义控件

<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="500px">
<source src="test.ogg" type="video/ogg" />
</video> <script type="text/javascript">
var myVideo = document.getElementById("video1"); function playPause(){
if (myVideo.paused){
myVideo.play();
}
else{
myVideo.pause();
}
} function makeBig(){
myVideo.width = 600;
}
function makeNormal(){
myVideo.width = 500;
}
function makeSmall(){
myVideo.width = 400;
}
</script>

Audio

<audio controls="controls">
<source src="song.mp3" type="audio/mepg" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>

H5还提供了很多多媒体的API,运用这些API可以做出精美的视频播放器和音乐播放器,时间有限,等我以后再来更新。

H5多媒体的更多相关文章

  1. H5多媒体(用面向对象的方法控制视频、音频播放、暂停、延时暂停)

    视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...

  2. H5 多媒体标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  4. Bigbluebutton服务执行过程及相关配置文件

    BigBlueButton服务列表 BigBlueButton由许多开源的服务组成,看似很麻烦,实际上拆分开每一个服务就很简单了,组件化平台化.究竟BBB都用到了哪些开源服务?我们来列举一下,名称均带 ...

  5. h5新特性--- 多媒体元素

    在H5中只有一行代码即可实现在页面中插入视频 <video src="插入的视频的名字" controls></video> 可以指明视频的宽度和高度 &l ...

  6. H5一二事

    先回顾一下WEB技术的几个阶段 Web 1.0 内容为主,主要流行HTML和CSS Web 2.0 动态网页,流行AJAX/JavaScript/DOM H5 时代,WEB开发回归富客户端 那么H5肯 ...

  7. 近期H5项目开发小结

    前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就 ...

  8. HTML 多媒体

    1.多媒体简介 Web 上的多媒体指的是音效.音乐.视频和动画,多媒体有多种不同的格式,它可以是听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在互联网上,几乎在所有网站都能发现嵌 ...

  9. HTML系列(七):多媒体

    一.video标签 H5新增了video实现在线播放视频的功能: 代码示例: <video controls="controls"> <source src=&q ...

随机推荐

  1. 扩展欧几里德 SGU 106

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=106   题意:求ax + by + c = 0在[x1, x2], [y1, y2 ...

  2. lintcode-414-两个整数相除

    414-两个整数相除 将两个整数相除,要求不使用乘法.除法和 mod 运算符. 如果溢出,返回 2147483647 . 样例 给定被除数 = 100 ,除数 = 9,返回 11. 标签 二分法 思路 ...

  3. 敏捷冲刺DAY8

    一. 每日会议 1. 照片 2. 昨日完成工作 第一次阶段测试. 3. 今日完成工作 对前七次敏捷冲刺的工作进行完善. 4. 工作中遇到的困难 浏览器兼容性问题.页面响应性能问题.内存溢出问题-- 二 ...

  4. 软工网络15团队作业4——Alpha阶段敏捷冲刺-5

    一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 日期等细致信息的处理,对添加账单日期化. 明天计划完成的工作: 完成对账单的编辑,删除等操作,以及开始服务器的编写工作 工作中遇到的困难: ...

  5. SpringMVC 应知应会

    springMVC 是表现层技术,可以用来代替 struts2,下面是简略图:主要是处理器和视图,只有这两个部分需要编写代码. springMVC 三大组件:处理器映射器,处理器适配器,视图解析器. ...

  6. Centos 7 环境下,如何使用 Apache 实现 SSL 虚拟主机 双向认证 的详细教程:

    1. testing ! ... 1 1 原文参考链接: http://showerlee.blog.51cto.com/2047005/1266712 很久没有更新LAMP的相关文档了,刚好最近单位 ...

  7. ping不通的常见原因和解决办法

    Ping是Windows.Unix和Linux系统下的一个命令.ping也属于一个通信协议,是TCP/IP协议的一部分.利用“ping”命令可以检查网络是否连通.如果ping不通则可以通过以下方式寻找 ...

  8. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  9. Java虚拟机的内存管理----垃圾收集器

    1.Serial收集器 优点,是简单而高效,单线程避免了线程交互的开销. 缺点,进行垃圾回收时需要Stop the world(暂停所有用户线程). 2.ParNew收集器 它是Serial收集器的多 ...

  10. 【BZOJ5333】荣誉称号(动态规划)

    [BZOJ5333]荣誉称号(动态规划) 题面 BZOJ 洛谷 题解 今天早上贱狗老师讲的.然而我还是不会. 只好照着\(zsy\)代码大力理解一波. 首先观察等式,如果比较熟悉线段树,会发现就是线段 ...