我使用的播放器是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>

wex5添加视频播放的更多相关文章

  1. swift UIview上添加视频播放

    1. /// 是否显示过广告 private lazy var isLoadAV = false /// 15秒宣传视频 private var play: AVPlayer? /// 宣传视频背景 ...

  2. 视频文件列表hover添加视频播放按钮

    默认效果图: 鼠标hover效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. ckplayer 网页视频播放

    最近做文件上传,可以上传的资源有图片,也有视频,在显示列表中点击视频播放图片(图1),需要弹出播放窗口(图2),播放视频.具体效果画面如下: 图1 图2:播放窗口 实现该功能使用的是ckplayer播 ...

  4. iOS - 视频循环播放

    录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...

  5. IOS流媒体播放

    IOS流媒体播放   1. 这里的流媒体地址是指服务端那边已经调好格式的可以在ios上播放的视频流. 下面提供几个视频流的地址: NSString *linkStr = http://61.160.2 ...

  6. iOS - 使用MPMoviePlayerController播放在线视频

    一 MPMoviePlayerController 简介 在iOS中播放视频可以使用MediaPlayer.framework种的MPMoviePlayerController类来完成,它支持本地视频 ...

  7. 个人博客开发之xadmin与ueditor集成

    项目源码下载:http://download.vhosts.cn 1. xadmin 添加ueditor 插件 vim extra_apps\xadmin\plugins\ueditor.py #没有 ...

  8. IT兄弟连 HTML5教程 了解HTML5的主流应用3

    5  基于HTML5的移动APP开发 不同的操作系统中,需要安装用不同技术开发的APP,移动端的操作系统有很多种,但最主要有两大分支,一种在苹果iOS操作系统中使用Objective-C语言开发APP ...

  9. Android短视频滑动播放(一)

    本文主要介绍采用RecyclerView配合PagerSnapHelper实现短视频滑动播放内容. 1. 主页内容构建 主页布局文件定义RecyclerView,为RecyclerView建立对应适配 ...

随机推荐

  1. HDU 1874-畅通project续(最短路Dijkstra+优先队列)

    畅通project续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. python实现websocket服务器,可以在web实时显示远程服务器日志

    一.开始的话 使用python简单的实现websocket服务器,可以在浏览器上实时显示远程服务器的日志信息. 之前做了一个web版的发布系统,但没实现在线看日志,每次发布版本后,都需要登录到服务器上 ...

  3. Python的学习

    1.psutil的安装 [root@YQY-TIAN- ~]# wget https://pypi.python.org/packages/source/p/psutil/psutil-2.0.0.t ...

  4. VLV INDEX

    Normally, when the Directory Server conducts a search, the server looks through the entire entry for ...

  5. jquery之鼠标失去焦点事件

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. Activity一共有以下四种launchMode

    1. standard: 无论什么情况都会生成一个新的Activity实例,并且放于栈顶. 2. singleTop:如果Activity纯在但是不位于栈顶,就重新生成一个Activity实例. 3. ...

  7. poj 1182 并查集高级应用

    C - 是谁站在食物链的顶端 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:10000KB     ...

  8. mysql 主从搭建

    主要搭建步骤如下: 1.打开binlog,设置server_id     打开主库的--log-bin,并设置server_id 2.主库授权                --最好也在从库对主库授权 ...

  9. Python一路走来 线程 进程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env pytho ...

  10. 《python基础教程》笔记之 元组

    元组不能修改,创建语法很简单:使用逗号分隔了一些值,则自动创建了元组. >>> 1,2,3(1, 2, 3)>>> 1,(1,) 元组的节本操作同列表相同,除了没有 ...