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 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
随机推荐
- python 生成器函数.推导式.生成器表达式
一.生成器 什么是生成器,生成器的实质就是迭代器 在python中有三种方式来获取生成器: 1.通过生成器函数 2.通过各种推导式来实现生成器 3.通过数据的转换也可以获取生成器 1 def func ...
- springboot自定义常量配置
现在你建一个类: import org.springframework.boot.context.properties.ConfigurationProperties; /** * Created b ...
- easyui datagrid 高度布局自适应
最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过 ...
- Unity学习-摄像机的使用（六）
快速对齐摄像机 [选择摄像机-GameObject-Align With View] Game模板中显示的界面,就是摄像机拍摄后的画面 本次学习案例 添加一个地形,一个点光源,三个Cube 了解摄 ...
- 表格对象的获取和更改（原生js）
表格对象的获取 var oT = document.getElementById("tb"); //获取head console.log(oT.tHead); console.lo ...
- Java NIO 聊天室实例
最近写了个Java NIO聊天室聊天的程序,NIO学习起来比较困难的,我的代码能给大家起到一个抛砖引玉的作用! 服务端: package test.javanio; /** * @author * @ ...
- JS——try catch throw
本例检测输入变量的值.如果值是错误的,会抛出一个异常(错误).catch 会捕捉到这个错误,并显示一段自定义的错误消息: <script> function myFunction() { ...
- atom 插件安装【转载】
http://www.cnblogs.com/20145221GQ/p/5334762.html 问题: 输入apm install后,可能一直没有响应,要强行退. 不知道安装的时候可不可以打开ato ...
- 在centOS环境搭建airtest时遇到 Xlib.error.DisplayNameError: Bad display name "" 和Xlib.error.XauthError异常
现在的问题 (airtestVenv) [root@67 airtest_selenium]# python3 proxy.pyTraceback (most recent call last): ...
- 一文详解Spring Cloud Feign重试机制
前言 Feign组件默认使用Ribbon的重试机制并增加了根据状态码判断重试机制,默认情况下是不启用的.Feign使用的是Spring Retry组件,需要引入依赖才能启用. 一.POM引入Sprin ...