安装和调用说明
zwplayer
包含的文件全部为静态文件,开发调用时,需要将包含的文件放置在Web的公开目录里,该目录必须能够通过http(或https)来进行远程访问,不得对该目录设置任何访问限制规则。例如可以将zwplayer
内建的文件放在web的静态资源目录的zwplayer
子目录里,很多web开发框架设置了一个public(或者static)目录来作为静态文件目录,建议将zwplayer
目录放在Web的静态文件目录里。
本文档为了便于后续解释说明,前提假设将zwplayer
放在web根目录的zwplayer
目录里。在将zwplayer
子目录放在web根目录的情况下,如果要调用zwplayer
,请在网页HTML文档的head元素内部添加如下代码:
<script type="text/javascript" charset="utf-8" src="/zwplayer/zwplayer.js"></script>
重要提示:使用zwplayer
的页面仅需要添加引入以上一行代码,除此之外无需引入其它任何文件。zwplayer
播放器内部需要的各种相关js、css与其它资源文件都是动态按需加载的,无需手工添加任何其它资源引用;zwplayer
在需要引用其它文件的时候,会在运行时动态加载其它文件,无需预先额外引入,例如假设要播放的格式为flv的视频流,zwplayer
播放器在运行时会自动动态加载flv.js代码文件。
当引入了zwplayer.js
文件后,zwplayer.js
会生成一个全局 XMPlayer 类,通过该类,我们可以在网页里创建一个或多个XMPlayer实例。XMPlayer类构造函数需要传入一个javascript对象作为参数,该js对象有两个必要属性,一个url,表示播放器要播放的媒体URL或定义媒体URL的js对象,由于zwplayer
功能非常强大,因此该url值的写法有许多种形式,后续会介绍;另一个必须参数为playerElm(player Element的简写),该参数的用途是为了定位播放器,我们应该提供一个div元素作为播放器的定位元素,播放器将在该元素内停靠,playerElm参数可以是一个div元素的ID,也可以直接传递一个div元素对象(通过document.getElementById或document.querySelector等函数获取的DOM对象)。
以下是调用播放器的最简单代码。
`var zwplayer = new ZWPlayer({`
`url: 'http://127.0.0.1/movie.mp4',`
`playerElm: '#player-holder' //player字符串,表示一个DIV元素的ID`
`});`
以上代码将创建一个zwplayer
对象(播放器类ZWPlayer
的实例),zwplayer
对象为一个纯JavaScript对象,不是浏览器DOM对象,请不要将zwplayer
对象传给 jQuery与Zepto 等JS框架。zwplayer
对象拥有少数几个方法,让开发者调用来控制zwplayer
。在一个H5网页里可以创建任意多个zwplayer
对象,这些对象相互独立,不会产生内部数据引用等方面的任何冲突。