wex5添加视频播放
我使用的播放器是ckplayer
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>
wex5添加视频播放的更多相关文章
- swift UIview上添加视频播放
1. /// 是否显示过广告 private lazy var isLoadAV = false /// 15秒宣传视频 private var play: AVPlayer? /// 宣传视频背景 ...
- 视频文件列表hover添加视频播放按钮
默认效果图: 鼠标hover效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- ckplayer 网页视频播放
最近做文件上传,可以上传的资源有图片,也有视频,在显示列表中点击视频播放图片(图1),需要弹出播放窗口(图2),播放视频.具体效果画面如下: 图1 图2:播放窗口 实现该功能使用的是ckplayer播 ...
- iOS - 视频循环播放
录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...
- IOS流媒体播放
IOS流媒体播放 1. 这里的流媒体地址是指服务端那边已经调好格式的可以在ios上播放的视频流. 下面提供几个视频流的地址: NSString *linkStr = http://61.160.2 ...
- iOS - 使用MPMoviePlayerController播放在线视频
一 MPMoviePlayerController 简介 在iOS中播放视频可以使用MediaPlayer.framework种的MPMoviePlayerController类来完成,它支持本地视频 ...
- 个人博客开发之xadmin与ueditor集成
项目源码下载:http://download.vhosts.cn 1. xadmin 添加ueditor 插件 vim extra_apps\xadmin\plugins\ueditor.py #没有 ...
- IT兄弟连 HTML5教程 了解HTML5的主流应用3
5 基于HTML5的移动APP开发 不同的操作系统中,需要安装用不同技术开发的APP,移动端的操作系统有很多种,但最主要有两大分支,一种在苹果iOS操作系统中使用Objective-C语言开发APP ...
- Android短视频滑动播放(一)
本文主要介绍采用RecyclerView配合PagerSnapHelper实现短视频滑动播放内容. 1. 主页内容构建 主页布局文件定义RecyclerView,为RecyclerView建立对应适配 ...
随机推荐
- 高性能WEB开发(11) - flush让页面分块,逐步呈现
高性能WEB开发(11) - flush让页面分块,逐步呈现 在处理比較耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应.一般大家在处理这样的情况,都使用a ...
- 【剑指Offer学习】【面试题56:链表中环的入口结点】
题目:一个链表中包括环.怎样找出环的入口结点? 解题思路 能够用两个指针来解决问题.先定义两个指针P1和P2指向链表的头结点.假设链表中环有n个结点,指针P1在链表上向前移动n步,然后两个指针以同样的 ...
- linux下mysql的卸载、安装全过程
卸载mysql 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 可以看到mysql的两个包: mysql-4.1.12-3.RHEL4.1 mysqlclient10 ...
- 50个android开发技巧
50个android开发技巧 http://blog.csdn.net/column/details/androidhacks.html
- easyui 快速开发整理
下面整理了关于easyui的datagrid的开发文档,复制黏贴即刻使用 1: <link href="../../Content/easyUI/themes/default/easy ...
- (转)SQL NEWID()随机函数
从A表随机取2条记录,用SELECT TOP 10 * FROM ywle order by newid()order by 一般是根据某一字段排序,newid()的返回值 是uniqueidenti ...
- 统计"面"要素中"点"要素的个数.
步骤 1,创建字段 IFields /// <summary> /// 创建:"面"-"点数"的字段. /// </summary> / ...
- Oracle怎样方便地查看报警日志错误
由于报警日志文件很大,而每天都应该查看报警日志(查看有无“ORA-”,Error”,“Failed”等出错信息),故想找到一种比较便捷的方法,查看当天报警日志都有哪些错误. 在网上查了几天的资料,尝试 ...
- alter database open resetlogs
使用resetlogs选项,会把当前的日志序号(log sequence number)重设为1,并抛弃所有日志信息.在以下条件时需要使用resetlogs选项: 在不完全恢复(介质恢复): 使用备份 ...
- iOS_SN_CocoaPods使用详细说明( 转)
一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...