wex5添加视频播放

时间：2024-10-29 12:36:56

我使用的播放器是ckplayer

http://www.ckplayer.com/

ckplayer存放路，项目路径下：

wex5添加视频播放

方法一：

在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双击进去，自动生成该方法；
wex5添加视频播放

方法二：

只在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>

相关文章