H5多媒体
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多媒体的更多相关文章
- H5多媒体(用面向对象的方法控制视频、音频播放、暂停、延时暂停)
视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...
- H5 多媒体标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- Bigbluebutton服务执行过程及相关配置文件
BigBlueButton服务列表 BigBlueButton由许多开源的服务组成,看似很麻烦,实际上拆分开每一个服务就很简单了,组件化平台化.究竟BBB都用到了哪些开源服务?我们来列举一下,名称均带 ...
- h5新特性--- 多媒体元素
在H5中只有一行代码即可实现在页面中插入视频 <video src="插入的视频的名字" controls></video> 可以指明视频的宽度和高度 &l ...
- H5一二事
先回顾一下WEB技术的几个阶段 Web 1.0 内容为主,主要流行HTML和CSS Web 2.0 动态网页,流行AJAX/JavaScript/DOM H5 时代,WEB开发回归富客户端 那么H5肯 ...
- 近期H5项目开发小结
前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就 ...
- HTML 多媒体
1.多媒体简介 Web 上的多媒体指的是音效.音乐.视频和动画,多媒体有多种不同的格式,它可以是听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动画等等.在互联网上,几乎在所有网站都能发现嵌 ...
- HTML系列(七):多媒体
一.video标签 H5新增了video实现在线播放视频的功能: 代码示例: <video controls="controls"> <source src=&q ...
随机推荐
- Redis的sentinel机制(sentinel节点IP为:192.168.23.10) “哨兵”
万一主节点打击,主从模型将会停止工作,为了解决这个问题,Redis提供了一个sentinel(哨兵),以此来实现主从切换的功能,一旦主节点宕机了,sentinel将会在从节点中挑一个作为主节点.与zo ...
- inno setup 打包exe程序
inno setup 用于打包生成安装程序, 是通过的一个脚本 可以将 exe 执行文件以安装的形式,解压,添加依赖,创建快捷方式. 例如,我们写了个winform,我们怎么通过安装的形式,给客户的机 ...
- 【前端学习笔记】函数定义、函数调用、this
函数定义的三种方式与特点: 1.函数声明:(特点:会被前置:重复定义函数时,最后一次定义有效.) 2.函数表达式: 3.函数实例化:(特点:只能访问本地作用域与全局作用域!!!) /* 对象实例化定义 ...
- 【.Net+数据库】sqlserver的四种分页方式
第一种:ROW_NUMBER() OVER()方式 select * from ( select *, ROW_NUMBER() OVER(Order by ArtistId ) AS RowId ...
- 【Python】极简单的方式序列化sqlalchemy结果集为JSON
继承 json.JSONEncoder 实现一个针对sqlalchemy返回类型的处理方式. sqlalchemy的返回类型有大都有两种,一种是Model对象,一种是Query集合(只查询部分字段). ...
- HDU2486_A simple stone game
这个题目是这样的,一堆石子有n个,首先第一个人开始可以去1-(n-1)个,接下来两人轮流取石子,每个人可取的石子数必须是一个不超过上一次被取的石子的K倍的整数. 现在求对于一堆数量为n的石子是否为必胜 ...
- iOS-开发者账号与证书
0.开发者账号的申请 1.iOS-证书相关 2.iOS-证书申请 3.iOS-APNS证书申请与使用 4.iOS-App发布证书的申请与使用
- Java NIO中的Buffer
简介 Buffer缓冲区,首先要弄明白的是,缓冲区是怎样一个概念.它其实是缓存的一种,我们常说的缓存,包括保存在硬盘上的浏览器缓存,保存在内存中的缓存(比如Redis.memcached).Buffe ...
- 学习NAT时引出网关
网关(Gateway) 网关实质上是一个网络通向其他网络的IP地址 只有设置好网关的IP地址,TCP/IP协议才能实现不同网络之间的相互通信
- pbuilder编译构建工具分析
1. 简介 pbuilder(personal Debian package builder)是ubuntu环境下维护debian包的专业工具,能够为每个deb包创建纯净的编译构建环境,自动解析和安装 ...