wex5添加视频播放

我使用的播放器是ckplayer

http://www.ckplayer.com/

ckplayer存放路，项目路径下：

方法一：

在monitor.w里加一个div标签

<div id="videoPlayer"></div>

 

monitor.js

define(function(require) {
	var $ = require("jquery");
	var justep = require("$UI/system/lib/justep");
	require("$UI/VT/ckplayer/ckplayer"); // ckplayer.js的路径,最后一个路径下的js的名字

	var Model = function() {
		this.callParent();
	};

	Model.prototype.modelLoad = function(event) {
		// $("#preview-player").css("width",document.body.clientWidth);
		// $("#preview-player").css("height",document.body.clientHeight/2.5);
		var playWidth = document.body.clientWidth;
		var playHeight = document.body.clientHeight / 3;
		//var playID = this.getIDByXID('videoPlayer');
		var flashvars = {
			f : 'http://movie.ks.js.cn/flv/other/1_0.mp4',
			c : 0,
			loaded : 'loadedHandler'
		};
		var video = [ 'http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4' ];
		var params = {
			bgcolor : '#FFF',
			allowFullScreen : true,
			allowScriptAccess : 'always'
		};
		var support = [ 'iPad', 'iPhone', 'ios', 'android+false',
				'msie10+false' ];
		CKobject.embed('$UI/VT/ckplayer/ckplayer.swf', "videoPlayer",
				'ckplayer_videoPlayer', playWidth, playHeight, false,
				flashvars, video, params, support);
	};

	return Model;
});

添加 Model.prototype.modelLoad:选中model，在事件里找到onLoad双击进去，自动生成该方法；

方法二：

只在monitor.w添加js

<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:91px;top:73px;"/> 
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel3">
   <div class="x-panel-top" xid="top3">
    <div component="$UI/system/components/justep/titleBar/titleBar" title="演示" class="x-titlebar" xid="titleBar1">
   <div class="x-titlebar-left" xid="left1">
    <a component="$UI/system/components/justep/button/button" label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left" onClick="{operation:'window.close'}" xid="backBtn">
     <i class="icon-chevron-left" xid="i1"></i>
     <span xid="span1"></span></a> </div> 
   <div class="x-titlebar-title" xid="title1">演示</div>
   <div class="x-titlebar-right reverse" xid="right1"></div></div></div> 
   <div class="x-panel-content" xid="content3">
    <div component="$UI/system/components/bootstrap/tabs/tabs" xid="tabs1">
     <div class="tab-content" xid="div1">
      <div class="tab-pane active" xid="tabContent1">
       		<div id="a1" xid="a1" style="height:400px;width:100%;"></div>
 			<script type="text/javascript" src="$UI/VT/ckplayer/ckplayer.js" charset="utf-8"></script>
 			<script type="text/javascript">
 				var videoUrl = 'http://www.billriote.com/easypusher_sdk/easypusher_sdk.m3u8';
				var video=[videoUrl];
				var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
				function loadedHandler(){
					CKobject.getObjectById('ckplayer_a1').marqueeLoad(true,'');
				    CKobject.getObjectById('ckplayer_a1').marqueeClose();
				 };	
				
				var flashvars={
					f:'ckplayer/m3u8.swf',
					a:videoUrl,
					s:4,
					c:0,
					p:1,
					lv:1,
					loaded:'loadedHandler'
				};
						
				//CKobject._K_(id).innerHTML='';
				CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);
				
 			</script>
       
       </div> </div> </div> </div> </div></div>