使用JavaScript脚本控制媒体播放(顺序播放和随机播放)
在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象,<video.../>元素对应的对象为HTMLVideoElement对象。
HTMLAudioElement对象和HTMLVideoElement对象支持的方法有如下几个:
- play():播放视频、音频
- pause():暂停播放
- load():重新装载音频、视频文件
- canPlayType(type):判断该元素是否可以播放type类型的音频、视频。该属性指定该音频、视频文件的类型,该属性值既可以是简单的MIME类型,例如audio/ogg、audio/mpeg等,也可以是MIME字符串并带codecs属性,codecs属性用于指定该视频文件的编码格式。该方法可以返回如下3个值
- probably:该浏览器支持播放此种类型的音频、视频
- maybe:该浏览器可能支持播放此种类型的音频、视频
- 空字符串:该浏览器不支持播放此种类型的音频、视频
下面页面代码实现了一个简单的音乐播放器,支持两种播放模式:随机播放和顺序播放。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</body>
</html>
页面效果如下:
使用JavaScript脚本控制媒体播放(顺序播放和随机播放)的更多相关文章
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
- MP3中设置播放顺序的软件《闪存式MP3伴侣》
给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...
- Unity3D中脚本的执行顺序和编译顺序
http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...
- 【转】Unity3D中脚本的执行顺序和编译顺序(vs工程引用关系)
http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...
- 5. Unity脚本的执行顺序
Unity是不支持多线程的,也就是说我们必须要在主线程中操作它,可是Unity可以同时创建很多脚本,并且可以分别绑定在不同的游戏对象身上,他们各自都在执行自己的生命周期感觉像是多线程,并行执行脚本的, ...
- (转)Unity3D中脚本的执行顺序和编译顺序(vs工程引用关系)
自:http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行 ...
- 【转】Unity3D中脚本的执行顺序和编译顺序
支持原文,原文请戳: Unity3D中脚本的执行顺序和编译顺序 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与脚本有关的也就是编译和执行啦 ...
- (转)MOMO的Unity3D研究院之深入理解Unity脚本的执行顺序(六十二)
http://www.xuanyusong.com/archives/2378 Unity是不支持多线程的,也就是说我们必须要在主线程中操作它,可是Unity可以同时创建很多脚本,并且可以分别绑定在不 ...
随机推荐
- JS 与 OC 交互
WebView与JS的几种交互 IOS中 使用JavaScriptCore 实现OC与JS的交互 JavaScriptCore 使用
- 实验三敏捷开发与XP实践《Java开发环境的熟悉》实验报告
一.实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报 ...
- JavaWeb学习笔记(二十)—— Ajax
一.Ajax概述 1.1 什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与 ...
- [软件工程]项目选择与NABCD模型分析
项目 内容 这个作业属于哪个课程 2019春季计算机学院软件工程(罗杰) 这个作业的要求在哪里 团队项目选择 这课程的目标是 以实践形式熟悉软件开发流程,团队开发,合作学习 本次作业对课程的帮助是 确 ...
- [短期持续更新]Codeforces 构造题一览
说实话我觉得做这种题很没意思(不够硬核), 可是人有短板终究是要补的...起码这种类型补起来相对简单 所以还是把先前准备好的专题放下吧,做点实现上比较休闲的题 ps.为了精简篇幅,代码全部丢到ubun ...
- eclipse 远程debug
[环境参数] Eclipse:Version: Mars.2 Release (4.5.2) Linux:centOS 6.5 [简述] Java自身支持调试功能,并提供了一个简单的调试工具--JDB ...
- Java 网络通信相关
http://m.blog.csdn.net/xiaojin21cen/article/details/78587541 越下面越底层 , 最后面的都是框架 , 下面的是 编程语言提供的库的 NIO ...
- Java 继承学习
Java 继承 继承实现: 在Java中,如果实现继承的,需要使用Java关键字——extends : 被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) class 子类 e ...
- Django跨域解决方法
from django.utils.deprecation import MiddlewareMixin class Mymiddle(MiddlewareMixin): def process_re ...
- SQL Server 保留关键字
Microsoft SQL Server 2005 使用保留关键字来定义.操作或访问数据库.保留关键字是 SQL Server 使用的 Transact-SQL 语言语法的一部分,用于分析和理解 Tr ...