3.3 最简单的调用样本
zwplayer
下面是一个完整的调用样本代码。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/zwplayer/zwplayer.js"></script>
</head>
<body>
<div class="video" id="zwplayer-wrap1" style="width: 800px;height: 450px;"></div>
<script type="text/javascript">
// 定义一个js对象info ，用来做为ZWPlayer 的构造参数
var info = {
playerElm: '#zwplayer-wrap1',
autoplay: false,
url: 'http://192.168.1.202:8088/vod/mp4/video.mp4'
};
//创建一个播放器实例
var player1 = new ZWPlayer(info);
//启动播放，zwplayer默认是自动启动播放的，因此，也建议省略下行代码
//仅在构造参数的autoplay设置为false时才需要调用
// player1.play();
</script>
</body>
</html>
以上网页代码创建了一个功能齐全的视频播放器，该播放器拥有自定义的播放控制条，播放控制条上有少数几个按钮，如果不想出现播放器控制条，可以在构造函数参数中添加controlbar属性，并将其初始化值设置为false。 要创建播放器，首先需要定义一个DIV元素用于定位播放器，然后将该DIV元素的ID作为参数赋值给playerElm属性，也可以直接将dom对象（getElementById 或 querySelector 等函数返回的值）赋值给playerElm属性。注意，如果传输一个ID但实际DOM对象不存在的，ZWPlayer函数会试图用此ID创建一个DIV元素作为播放器的定位元素，创建的元素将定位于顶级body，其宽度为640px，高度为360px，起始坐标为（0，0）。 如果不想对创建的播放器实例进行任何方法调用操作，实现视频播放器更简单的写法如下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/zwplayer/zwplayer.js"></script>
</head>
<body>
<div class="video" id="zwplayer-wrap1" style="width: 800px;height: 450px;"></div>
<script type="text/javascript">
new ZWPlayer({
playerElm: '#zwplayer-wrap1',
url: 'http://192.168.1.202:8088/vod/mp4/movie.mp4'
});
</script>
</body>
</html>
以上代码创建了一个视频播放器，由于没有将ZWPlayer对象保存为变量，后续将不能对播放器实例进行任何方法调用操作。