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. MySql 8 命令

    1-创建用户 create user 用户名@'%' identified by '密码'; create user 用户名@'localhost' identified by '密码';   2-授 ...

  2. 图论---POJ 3660 floyd 算法(模板题)

    是一道floyd变形的题目.题目让确定有几个人的位置是确定的,如果一个点有x个点能到达此点,从该点出发能到达y个点,若x+y=n-1,则该点的位置是确定的.用floyd算发出每两个点之间的距离,最后统 ...

  3. 人生的第一篇blog

    开始写博客了,人生第一篇博客啊,要写些什么呢?想想也没有什么头绪,随便写写吧. 这学期要使用代码管理工具了,要写团队项目了.一直以来都是自己一个人在默默编程,没有过合作经历.对于代码的管理也只是一直在 ...

  4. jQuery异步Deferred

    原文链接:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html 普通 ...

  5. 团队作业05——测试与发布(alpha阶段)

    测试 请根据团队项目中软件的需求文档.功能说明.系统设计和测试计划,写出软件的测试过程和测试结果,并回答下述问题. 在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? 显示计算结果超过看 ...

  6. IBM存储降级告警等一些服务器问题/dd/ethtool

    1.IBM存储降级告警 一般两种情况 a.端口降级 例如模块16G->8G(IBM储存端口自适应) b.系统在作raid后,有硬盘损坏,降级 黄灯告警 2. dimm error dimm内存插 ...

  7. Win2019 显示 SMBV1 协议不安全的处理

    1. 登录有问题. 报错 [Window Title] \\10.100.1.163 [Content] \\10.100.1.163 因为文件共享不安全,所以你不能连接到文件共享.此共享需要过时的 ...

  8. arp_filter的验证,使用net namespace

    使用网络命名空间:net namespace 在namespace ns1中增加了两个网卡 sudo ip netns add ns1 sudo ip link add veth0 type veth ...

  9. HUST1017-Exact Cover

    给出一个\(n\times m\)的01矩阵,每行最多有\(c\)个1,求一个精确覆盖,即选出一些行使得每列有有且仅有一个1.输出方案. 分析 被这个题坑到了啊!!第一次上HUSTOJ做题,不知道没有 ...

  10. 【纪念】NOIP2018后记——也许是一个新的起点

    如果你为了失去太阳而哭泣,那么你也将失去星星和月亮. —— 泰戈尔<飞鸟集> NOIP结束了,我挂了一道题……曾经在心中觉得怎么都不会考到的分数,就这么冷冷的出现在了我的成绩单上.的确是比 ...