我使用的播放器是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. c++应用程序文件的编译过程

    这里讲下C++文件的编译过程及其中模板的编译过程: 一:一般的C++应用程序的编译过程.     一般说来,C++应用程序的编译过程分为三个阶段.模板也是一样的. 在cpp文件中展开include文件 ...

  2. css变形几大属性

    1.transform: transform-function() * | none; transform-function: translate().scale().rotate().skew(). ...

  3. css伪类选择器详细解析及案例使用-----伪类选择器(2)

    结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...

  4. Sass的控制命令(循环)

    @if@if指令是一个SassScript,它可以根据条件来处理样式块,如果条件为true返回一个样式块,反之false返回另一个样式块.在Sass中除了@if,还可以配合@else if和@else ...

  5. Visual Studio Code使用typings拓展自动补全功能

    转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.c ...

  6. java下radomAccessFile文件写入读取

    package cn.stat.p2.demo; import java.io.FileNotFoundException; import java.io.IOException; import ja ...

  7. POJ3484 Showstopper (二分+字符串处理)

    POJ3484 Showstopper 题目大意: 每次给出三个数x,y,z,用这三个数构成一个等差数列,x为首项,y是末项,z是公差 总共给出n组x,y,z( n待定),求这n组数列中出现次数为奇数 ...

  8. 使用自定义类型做qmap,qhash的key

    map在STL中的定义 template <class Key, class T, class Compare = less<Key>, class Alloc = alloc> ...

  9. DSP TMS320C6000基础学习(3)——CCS v5软件开发环境搭建

    ================================================== DSP CCS工程文件构成 =================================== ...

  10. curl抓取信息

    <?php $hotel = new curl(false,0); $str = $hotel -> post("http://www.todayinns.com/login.p ...