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. HDU 5391Z ball in Tina Town 数论

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5391 bc:  http://bestcoder.hdu.edu.cn/contests/c ...

  2. web.config详解(转载)

    该文为转载 原文地址:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.c ...

  3. C++ Primer Plus学习:第四章

    C++入门第四章:复合类型 1 数组 数组(array)是一种数据格式,能够存储多个同类型的值. 使用数组前,首先要声明.声明包括三个方面: 存储每个元素中值的类型 数组名 数组中的元素个数 声明的通 ...

  4. DB2 UDB V8.1 管理

    在DB2中有关实例(Instance), 数据库(Database),表空间(TableSpace),容器(Container)等概念: 在一个操作系统中,DB2数据服务可以同时运行多个实例(有别于O ...

  5. 敏捷冲刺DAY5

    一. 每日会议 1. 照片 2. 昨日完成工作 发布和提供需求功能的实现 用户修改自己的信息 用户界面设计 管理员界面设计 3. 今日完成工作 4. 工作中遇到的困难 1.设置的背景无法显示. 2.一 ...

  6. PHP 生成条形码

    <?php class BarCode128 { const STARTA = 103; const STARTB = 104; const STARTC = 105; const STOP = ...

  7. 西南大学校园网客户端共享网络之路由器开wifi

    1年前出了NetKeeper,让寝室只能一个人用一个账号,而且,在寝室平板手机什么的只能靠360wifi什么的来维持了,电脑一直不能关,确实让人不爽. 最近学校又出台了swu-wifi-dorm来让寝 ...

  8. java 基础 --Collection(Map)

    Map是不是集合?哈哈哈 java编程思想>的第11章,第216页,正数第13行,中原文:“……其中基本的类型是LIst.Set.Queue和Map.这些对象类型也称为集合类,但由于Java类库 ...

  9. display:table的几个妙用:垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  10. BZOJ4878 挑战NP-Hard(dfs树)

    既然是二选一,考虑两个问题有什么联系.题面没有说无解怎么办,所以如果不存在经过k条边的简单路径,一定存在k染色方案.考虑怎么证明这个东西,我们造一棵dfs树.于是可以发现如果树深>k(根节点深度 ...