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的更多相关文章

  1. H5播放器内置播放视频（兼容绝大多数安卓和ios）

    关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...

  2. JavaScript多个h5播放器video，点击一个播放其他暂停

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. EasyPlayer.js H5播放器帮助我这种不会前端的普通用户也能轻松实现直播接入

    说到EasyPlayer.js,先得说一下EasyPlayer到底是啥, An elegant, simple, fast android RTSP/RTMP/HLS/HTTP Player.Easy ...

  4. 如何利用阿里视频云开源组件，快速自定义你的H5播放器？

    摘要: Aliplayer希望提供一种方便.简单.灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己A ...

  5. layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满<video>的方法

    1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...

  6. H5播放器

    <!DOCTYPE html>  <html>  <body>  <div style="text-align:center">  ...

  7. h5 播放器 -2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 一款兼容性较强的H5播放器-Mediaelementjs

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  9. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

随机推荐

  1. C 语言程序员必读的 5 本书

    你正通过看书来学习C语言吗?书籍是知识的丰富来源.你可以从书中学到各种知识.书籍可以毫无歧视地向读者传达作者的本意.C语言是由 Dennis Ritchie在1969年到1973年在贝尔实验室研发的. ...

  2. RHEL6.5 设置yum，IP地址，解压缩

    系统运维 www.osyunwei.com 温馨提醒:qihang01原创内容©版权所有,转载请注明出处及原文链接 服务器相关设置如下: 操作系统:RHEL 6.5 64位 IP地址:192.168. ...

  3. 【BZOJ3328】PYXFIB（数学）

    什么都不会的数学蒻菜瑟瑟发抖--Orz橙子(和兔子) 题目: BZOJ3328 分析: 橙子给我安利的数学题--(然后我就看着他因为矩阵乘法多模了一次卡了一天常数qwq表示同情) 先考虑一个子问题:求 ...

  4. C#最实用的快捷键

    Ctrl+J(Alt+→):智能提示. Ctrl+X:删除整行. Shift+Alt+Enter:全屏切换 F12:跳转到定义. Ctrl+-.Ctrl+Shift+-:上一步.下一步(仅限于使用过上 ...

  5. Java常用类库(二)：Iterator迭代器和子范围视图

    今天介绍集合类的以下内容: l  Iterator迭代器 l  子范围视图简介 Iterator迭代器: 应该将java迭代器认为是位于两个元素之间, 当调用next 时,迭代器就越过下一个元素,并返 ...

  6. C++中 list与vector的区别

    引用http://www.cnblogs.com/shijingjing07/p/5587719.html C++ vector和list的区别 1.vector数据结构vector和数组类似,拥有一 ...

  7. 安装nodejs6.9x以后,原来在nodejs4.2.x中运行正常的ionic项目出现问题的解决

    安装nodejs6.9x以后,原来在nodejs4.2.x中运行正常的程序出现的问题.看错误信息,由于NodeJs版本升级导致的. 到提示的目录下运行:npm rebuild node-sass -g ...

  8. 如何在linux搭建airtest+chromeweb测试环境--(用命令行运行.air脚本)

    大前堤: 如果你需要airtest提供的可视化测试报告,那你的操作系统,一定要有图形化界面. 否则运行你的airtest脚本 会遇到这样的问题 Xlib.error.DisplayNameError: ...

  9. CSS 选择器 知识点

    <html> <head> <style type="text/css"> h1 > strong { /*子元素选择器 只选择自己 的子 ...

  10. list.h在用户态下的应用

    一.背景 list.h文件位于linux/include下,内核中链表的操作函数都在其中.它有许多关于链表的操作函数,所以我们可以尝试将list.h拉到用户态中来使用,这样,我们在用户态中若要用到链表 ...