h5 播放器 -3
autoplay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
oA.currentTime = 60;//从一分钟的时候开始播放 这个在火狐里有效 在chrome下无效
oA.volume = 0.1;//音量
oA.muted =1;//静音 0 不静音
//setInterval(function(){
//console.log( oA.currentTime )
//},1000)
//还可以设置从哪里开始播放 }
</script>
</head>
<!--兼容性-->
<body>
<audio controls autoplay loop id="a1" src="goda goda.mp3"></audio>
<!-- <video controls src="Intermission-Walk-in_512kb.mp4"></video>-->
<video controls>
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
//没有设置control 控件的时候 oA.onmouseover = function(){
this.play()
} oA.onmouseout = function(){
this.pause()
} //load() 重新加载
var oInput = document.getElementsByTagName('input')[0];
var aS = document.getElementsByTagName('source') ;
oInput.onclick = function(){
aS[0].src = '111.ogv';
aS[1].src = '111.mp4';
oA.load()
} }
</script>
</head>
<!--兼容性-->
<body>
<input type="button" value="切换媒体" />
<video id="a1">
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
poster 换封面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script>
window.onload=function(){
var oA = document.getElementById('a1');
//没有设置control 控件的时候 oA.poster = '2.png';
oA.currentTime = 1020;
oA.addEventListener('ended',function(){
alert()
},false)
}
</script>
</head>
<!--兼容性-->
<body> <video id="a1" controls>
<source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source>
</video>
</body>
</html>
带声音的导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:1000px; height:30px;}
#ul1 li{ list-style:none; width:100px; height:30px; background:red; color:white; border:1px #000 solid; float:left; line-height:30px; text-align:center;}
</style>
<script> window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oA = document.getElementById('a1'); for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function(){ //this.getAttribute('au'); oA.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.getAttribute('au')+'4.mp3'; oA.play(); };
} }; </script>
</head> <body>
<ul id="ul1">
<li au="a">11111</li>
<li au="b">22222</li>
<li au="c">33333</li>
<li au="d">44444</li>
<li au="e">55555</li>
<li au="f">66666</li>
<li au="g">77777</li>
</ul>
<audio id="a1"></audio>
</body>
</html>
h5 播放器 -3的更多相关文章
- H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...
- JavaScript多个h5播放器video，点击一个播放其他暂停
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入
说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.Easy ...
- 如何利用阿里视频云开源组件，快速自定义你的H5播放器？
摘要: Aliplayer希望提供一种方便.简单.灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己A ...
- layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法
1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...
- H5播放器
<!DOCTYPE html> <html> <body> <div style="text-align:center"> ...
- h5 播放器 -2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 一款兼容性较强的H5播放器-Mediaelementjs
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
随机推荐
- Tornado异步模式
先介绍下背景:由于工作需要,前段时间又写了一段爬虫去获取和更新一些数据.之前爬虫主要用Scrapy框架批量爬取一些页面数据,或者用Gevent调用目标站点的接口.偶然看到了Tornado,听说这个框架 ...
- HyperLedger Fabric部署与链码解读
1.Fabric简介 Fabric是超级账本中的一个项目,用以推进区块链技术.和其他区块链类似,它也有一个账本,使用智能合约,且是一个参与者可以分别管理自身交易的系统.它是一个联盟链.Fabric与其 ...
- $P2126 Mzc家中的男家丁$
problem #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; typedef long long LL ...
- SQL数据库还原的二种方式和区别
1.数据库还原 在SQL中,直接选择选择“还原数据库”:选中.bak 文件即可. 2.生成脚本 新建同样的DB名字,在SQL打开脚本,执行脚本语言.数据库里面就会自动填充内容.
- linux上搭建svn
参照网址:http://www.cnblogs.com/LusYoHo/p/6056377.html(如何在linux下搭建svn服务) http://www.cnblo ...
- Servlet访问路径的两种方式、Servlet生命周期特点、计算服务启动后的访问次数、Get请求、Post请求
Servlet访问路径的两种方式: 1:注解 即在Servlet里写一个@WebServlet @WebServlet("/myServlet") 2:配置web.xml < ...
- JVM 优化之逃逸分析
整理自 周志明<深入JVM> 1, 是JVM优化技术,它不是直接优化手段,而是为其它优化手段提供依据. 2,逃逸分析主要就是分析对象的动态作用域. 3,逃逸有两种:方法逃逸和线程逃逸. ...
- [ HNOI 2006 ] 公路修建问题
\(\\\) \(Description\) 一个\(N\)个点\(M\)条边的图,每条边可以选择\(w_i,p_i\)两个边权之一,现求一个生成树上的最大边权最小值,要求这棵生成树上至少有\(K\) ...
- 关于用友 U8-UAP二开的一些事
这是关于一个刚刚接触用友U8的二次开发的一些小心得. 首先就是用友二开的论坛,http://u8dev.yonyou.com/ 当然这个论坛做得不怎么样,提出了好几个问题,都没有回复的. 以下是关于二 ...
- JS——模拟百度搜索
注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...