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建立对应适配 ...
随机推荐
- hdu 4605-Magic Ball Game(树状数组)
题目大意: 给你一棵二叉树,每个节点有一个w值,现在有一颗小球,值为x,从根节点往下掉,如果w==x,那么它就会停止:如果w>x,那么它往左.右儿子的概率都是1.2:如果w<x,那么它往左 ...
- Hadoop-2.2.0中文文档—— Common - CLI MiniCluster
目的 使用 CLI MiniCluster, 用户能够简单地仅仅用一个命令就启动或关闭一个单一节点的Hadoop集群,不须要设置不论什么环境变量或管理配置文件. CLI MiniCluster 同一时 ...
- Hadoop shuffle与排序
Mapreduce为了确保每个reducer的输入都按键排序.系统执行排序的过程-----将map的输出作为输入传给reducer 称为shuffle.学习shuffle是如何工作的有助于我们理解ma ...
- Swift - defer关键字(推迟执行)
在一些语言中,有try/finally这样的控制语句,比如Java. 这种语句可以让我们在finally代码块中执行必须要执行的代码,不管之前怎样的兴风作浪. 在Swift 2.0中,Apple提供了 ...
- bootstrap-datetimepicker使用记录
版本:V2.0 1.bootstrap-datetimepicker.min.css 2.bootstrap-datetimepicker.min.js 3.bootstrap-datetimepic ...
- asp.net 的那点事(1、当用户在浏览器地址栏输入了网址后,发生了什么?)
从今天开始我将抽出空闲时间复习asp.net相关知识.此篇博文只是为了记录学习当中的知识点和感觉到比较重要的知识点. 本人才疏学浅,如有遗漏或者错误希望广大博友尽情拍砖.我会在后续中进行更正. 这个问 ...
- python 中变量的命名规范
出自:http://www.diybl.com/course/3_program/python/20111130/563643.html 模块名: 小写字母,单词之间用_分割 ad_stats.py ...
- Python新手学习基础之函数-概念与定义
什么是函数? 函数是可以实现一些特定功能的方法或是程序,简单的理解下函数的概念,就是你编写了一些语句,为了方便使用,把这些语句组合在一起,给它起一个名字,即函数名.使用的时候只要调用这个名字,就可以实 ...
- C语言基础学习学习前的准备-1
C语言概述 欢迎来到C的世界!C语言之所以命名为C,是因为C语言源自Ken Thompson发明的B语言.它是一种可移植语言,通常一个C程序可以经过很少的改动甚至不经改动就可以在其它系统上运行:它强大 ...
- C#中睡眠函数Sleep
命名空间:using System.Threading; Thread.Sleep();//睡眠500毫秒,也就是0.5秒