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. tensorflow之曲线拟合

    视频链接:https://morvanzhou.github.io/tutorials/machine-learning/ML-intro/ 1.定义层 定义 add_layer() from __f ...

  2. 团队作业——王者光耀:team

    光耀101  <光耀101>是福州大学数计学院计算机专业推出的中国首部程序猿脱发养成节目.由张栋担任发起人,刘晨瑶.畅畅担任导师.  该节目召集了你猜多少位选手,通过任务.训练.考核,让选 ...

  3. 读我是一只it小小鸟有感!!!

    <<我是一只it小小鸟>>是老师为我们这些即将步入it行业的新人推荐的一本书,通过这本书的简介知道它是由一群it学子共同创造而成的,每个人分别讲述各自的成长经历.书的开篇是本书 ...

  4. lintcode-477-被围绕的区域

    477-被围绕的区域 给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例 给出二维矩阵: X X X X X O O X X X O X X O ...

  5. 201621123037 《Java程序设计》第3周学习总结

    #Week03-面向对象入门 1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联 ...

  6. Qt使用QNetworkAccessManager实现Http操作

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt使用QNetworkAccessManager实现Http操作     本文地址:http ...

  7. 使用Log4在测试过程中打印执行日志 及配置log4j.properties!

    http://zengxiantao.iteye.com/blog/1881706 1.环境配置:到网上下载log4j-1.2.17.jar包!完后 添加到 项目的build path 中即可! 2. ...

  8. redis 同步化操作

    异步化操作是很麻烦的的.不好控.下面介绍个同步化的库bluebird.用法很简单.看下你还子就知道了 const redis = require('redis'); const bluebird = ...

  9. Spring Autowired原理

    今天来整理一下Spring的自动装配 autowire一节,在这里我们要解决以下问题: 什么是自动装配? 自动装配的意义? 自动装配有几种类型? 如何启用自动装配? 自动装配将引发的问题? 一.什么是 ...

  10. UVA - 11997(巧妙的优先队列)

    题意: 有k个整数数组,各包含k个元素,在每个数组中取一个元素加起来,可以得到kk个和,求这些和中最小的k个值 解析: 从简单的情况开始分析:经典方法,对原题没有思路,那么分析问题的简化版 这是对于两 ...