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 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
随机推荐
- Golang 入门 : goroutine(协程)
在操作系统中,执行体是个抽象的概念.与之对应的实体有进程.线程以及协程(coroutine).协程也叫轻量级的线程,与传统的进程和线程相比,协程的最大特点是 "轻"!可以轻松创建上 ...
- linux 如何查看进程的执行时间
ps -ef|grep wo.php 得到 程序的pid 如 123 ps -p 123 -o etime
- $tsinsenA1067$
\(problem\) 这种题目需要一个定理 \(a[1]+a[2]+a[3]+a[4]...=(a[1]%mod)+...\) 本人出奇的懒 然后 动态规划?(恰似枚举) #include < ...
- MySQL简明教程---级联约束
- [hihocoder][Offer收割]编程练习赛62
方向 #pragma comment(linker, "/STACK:102400000,102400000") #ifndef ONLINE_JUDGE #include &qu ...
- fastjson——json工具库
fastjson alibaba fastjson是阿里巴巴公司开源维护的一个处理json格式数据的java工具库. 功能特性: 数据绑定databind (json string <--> ...
- SQL基本操作——select into与临时表
SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中,常用于创建表的备份复件或者用于对记录进行存档. --制作 "Persons" 表的备份复件: SELECT ...
- Windows Phone 8: NavigationInTransition实现页面切换效果
NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...
- Map 键值对 set get delete
- transform: scale(x,y)
作用: 1)缩放 2)反转 水平翻转:transform: scale(-1,1); 垂直翻转:transform: scale(1,-1); 水平垂直翻转: transform: scale(-1, ...