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 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
随机推荐
- C#使用Parallel处理数据同步写入Datatable并使用BulkInsert批量导入数据库
项目需要,几十万张照片需要计算出每个照片的特征值(调用C++编写的DLL). 业务流程:选择照片文件夹,分别访问照片-->调用DLL接口传递照片路径-->接收处理返回值-->写入数据 ...
- Scaffold-DbContext-EFCore DB First
在使用 Scaffold-DbContext迁移数据库的时候会遇到两个问题. 一.文件已存在,其实报错很明显,增加 -force即可. 二.大小写转换,不和数据库一样了,如果要保持和数据库一致.增加 ...
- Android 显示意图和隐式意图的区别
意图在android的应用开发中是很重要的,明白了意图的作用和使用后,对开发会有很大帮助.如果没有把意图搞懂,以后开发应用会感觉缺些什么. 意图的作用: 1.激活组件 ...
- Java—将文件压缩为zip文件
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...
- css3 绘制书本
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- tomcat报错org.springframework.web.context.ContextLoaderListener找不到
tomcat报错org.springframework.web.context.ContextLoaderListener找不到. 最后解决办法:将jar包copy到web-inf下面的lib中. 你 ...
- python2升级成python3
系统环境centos 6.5原python版本2.6.6目标python版本3.5.11.下载python3.5wget --no-check-certificate http://www.pyth ...
- 正文处理命令及tar命令
使用cat命令进行文件的纵向合并,具体命令如下所示(注意:>代表将左边命令的执行结果以覆盖的方式放到右边,>>代表将左边命令的执行结果追加到右边) 关于tar命令的一些用法: tar ...
- tailf
功能说明:tailf命令几乎等同于tail -f,与tail -f不同的是,如果文件不增长,那么它不会去访问磁盘文件,也不会更改文件的访问时间.tailf命令在工作中的主要使命就是跟踪日志文件,首先将 ...
- Codeforces_731F_(前缀和)
F. Video Cards time limit per test 1 second memory limit per test 256 megabytes input standard input ...