JavaScript - 多媒体

JavaScript navigator 对象包括一个名为 plugins 的子对象。此对象是一个数组，浏览器上安装的每个插件都有一个条目。只有 Netscape、Firefox 和 Mozilla 仅支持 navigator.plugins 对象。

例

这是一个示例，展示了如何列出浏览器中安装的所有插件 -


<html>
	 	<head>
	 	 	 <title>List of Plug-Ins</title>
	 	</head>
	 	
	 	<body>
	 	 	 <table border = "1">
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Plug-in Name</th>
	 	 	 	 	 	 <th>Filename</th>
	 	 	 	 	 	 <th>Description</th>
	 	 	 	 	</tr>
	 	 	 	 	
	 	 	 	 	<script language = "JavaScript" type = "text/javascript">
	 	 	 	 	 	 for (i = 0; i<navigator.plugins.length; i++) {
	 	 	 	 	 	 	 	document.write("<tr><td>");
	 	 	 	 	 	 	 	document.write(navigator.plugins[i].name);
	 	 	 	 	 	 	 	document.write("</td><td>");
	 	 	 	 	 	 	 	document.write(navigator.plugins[i].filename);
	 	 	 	 	 	 	 	document.write("</td><td>");
	 	 	 	 	 	 	 	document.write(navigator.plugins[i].description);
	 	 	 	 	 	 	 	document.write("</td></tr>");
	 	 	 	 	 	 }
	 	 	 	 	</script>
	 	 	 </table> 	 	 	
	 	</body>
</html>

检查插件

每个插件在数组中都有一个条目。每个条目都具有以下属性 -

name − 是插件的名称。
filename − 是为安装插件而加载的可执行文件。
description - 是插件的描述，由开发者提供。
mimeTypes − 是一个数组，插件支持的每种 MIME 类型都有一个条目。

您可以在脚本中使用这些属性来查找已安装的插件，然后使用 JavaScript 播放适当的多媒体文件。请看下面的例子。


<html> 		
	 	<head>
	 	 	 <title>Using Plug-Ins</title>
	 	</head>
	 	
	 	<body> 		
	 	 	 <script language = "JavaScript" type = "text/javascript">
	 	 	 	 	media = navigator.mimeTypes["video/quicktime"];
	 	 	 	 	
	 	 	 	 	if (media) {
	 	 	 	 	 	 document.write("<embed src = 'quick.mov' height = 100 width = 100>");
	 	 	 	 	} else {
	 	 	 	 	 	 document.write("<img src = 'quick.gif' height = 100 width = 100>");
	 	 	 	 	}
	 	 	 </script> 	 	 	
	 	</body>
</html>

注意：这里我们使用 HTML <embed> 标签来嵌入多媒体文件。

控制多媒体

让我们举一个几乎适用于所有浏览器的真实示例 -


<html> 		
	 	<head>
	 	 	 <title>Using Embeded Object</title>
	 	 		
	 	 	 <script type = "text/javascript">
	 	 	 	 	function play() {
	 	 	 	 	 	 if (!document.demo.IsPlaying()) {
	 	 	 	 	 	 	 	document.demo.Play();
	 	 	 	 	 	 }
	 	 	 	 	}
	 	 	 	 	function stop() {
	 	 	 	 	 	 if (document.demo.IsPlaying()) {
	 	 	 	 	 	 	 	document.demo.StopPlay();
	 	 	 	 	 	 }
	 	 	 	 	}
	 	 	 	 	function rewind() {
	 	 	 	 	 	 if (document.demo.IsPlaying()) {
	 	 	 	 	 	 	 	document.demo.StopPlay();
	 	 	 	 	 	 }
	 	 	 	 	 	 document.demo.Rewind();
	 	 	 	 	}
	 	 	 </script>
	 	</head>
	 	
	 	<body> 	 	 	
	 	 	 <embed id = "demo" name = "demo"
	 	 	 	 	src = "http://www.amrood.com/games/kumite.swf"
	 	 	 	 	width = "318" height = "300" play = "false" loop = "false"
	 	 	 	 	pluginspage = "http://www.macromedia.com/go/getflashplayer"
	 	 	 	 	swliveconnect = "true">
	 	 		
	 	 	 <form name = "form" id = "form" action = "#" method = "get">
	 	 	 	 	<input type = "button" value = "Start" onclick = "play();" />
	 	 	 	 	<input type = "button" value = "Stop" onclick = "stop();" />
	 	 	 	 	<input type = "button" value = "Rewind" onclick = "rewind();" />
	 	 	 </form> 	 	 	
	 	</body>
</html>

打印本页