- HTML 5_CSS 3_JavaScript讲义（四）-HTM
- HTML 5_CSS 3_JavaScript讲义（三）-HTM
- HTML 5_CSS 3_JavaScript讲义（二）-HTM
- HTML 5_CSS 3_JavaScript讲义（十二）- D
- HTML 5_CSS 3_JavaScript讲义（六）- 字体
- HTML 5_CSS 3_JavaScript讲义（七）-背景，
- HTML 5_CSS 3_JavaScript讲义（八）- 大小
- HTML 5_CSS 3_JavaScript讲义（九） - 盒
- HTML 5_CSS 3_JavaScript讲义（十一）- 变
- HTML 5_CSS 3_JavaScript讲义（十）- 表格
（1）.使用audio和video元素
<h2> 音频播放 </h2>
<audio controls>
<!-- 让浏览器依次选择适合自己播放的音频文件 -->
<source src="demo.ogg" type="audio/ogg"/>
<source src="demo.mp3" type="audio/mpeg"/>
<source src="demo.wav" type="audio/x-wav"/>
</audio>
音频播放
（2）.使用javascript脚本控制媒体播放
HTMLAudioElement
HTMLVideoElement
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 音乐播放器 </title>
<script type="text/javascript">
// 定义能播放的所有音乐
var musics = [
"demo1.ogg",
"bomb.ogg",
"arrow.ogg",
"love.ogg",
"song.ogg",
];
// 定义正在播放的音频文件的索引
var index = 0;
// 记录顺序播放、随机播放的变量
var playType;
var player;
window.onload = function()
{
var typeSel = document.getElementById("typeSel");
// 当用户更改下拉菜单的选项时，改变播放方式
typeSel.onchange = function()
{
window.playType = typeSel.value;
}
player = document.getElementById("player");
// 页面加载时播放第一个音频文件
player.src = musics[index];
player.onended = function()
{
if(playType == "random")
{
// 计算一个随机数
index = Math.floor(Math.random() * musics.length);
// 随机播放一个音频文件
player.src = musics[index];
}
else
{
// 播放下一个音频文件
player.src = musics[++index % musics.length];
}
// 播放
player.play();
}
}
</script>
</head>
<body>
<h2> 音乐播放器 </h2>
<select id="typeSel" style="width:160px">
<option value="sequence">顺序播放</option>
<option value="random">随机播放</option>
</select><br/>
<audio id="player" controls>
您的浏览器不支持audio元素
</audio>
image.png
<h2> 视频播放 </h2>
<video id="mv" src="movie.webm" loop>
您的浏览器不支持video元素
</video><br/>
<input id="bn" type="button" value="播放"/><span id="detail"></span>秒
<script type="text/javascript">
var bn = document.getElementById("bn");
var mv = document.getElementById("mv");
var detail = document.getElementById("detail");
// 为video元素的ontimeupdate事件绑定监听器
mv.ontimeupdate = function()
{
detail.innerHTML = mv.currentTime + "/"
+ mv.duration;
};
bn.onclick = function()
{
if(mv.paused)
{
mv.play();
bn.value = "暂停";
}
else
{
mv.pause();
bn.value = "播放";
}
}
</script>
image.png
网友评论