视频播放
视频上传成功后,进入转码阶段,将统一转成标准的MP4格式。视频转码成功后即可观看视频。现在提供两种方式调用:(1)iframe方式;(2)javascript方式。
注:播放器播放需要 Flash 插件版本在 10.1 以上方可正常使用,请确保 Flash 插件版本符合要求。
iframe调用格式为:<sitename>/Widgets/VideoPlay/[videoID],其中”[videoID]”为视频基本信息提交成功后返回的视频ID。视频长、宽可根据需要自行设置。以下为嵌入到对接系统的视频播放代码:
调用代码实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!--采用iframe的方式进行播放视频-->
<iframe src="http://open.ksedu.cn/Widgets/VideoPlay/7b48d0ad-9c47-4e57-b927-a0304633c1b4" style="border: none;
width: 667px;height: 500px; overflow: hidden;" frameborder="no" border="0" marginwidth="0" marginheight="0"
scrolling="no" allowtransparency="yes"></iframe>
</body>
</html>
该方式需要调用视频开放平台提供的bootPlayerLib.js、initPlayerWidget.js两个文件,并对initPlayerWidget.js中的jklib.InitPlayer方法初始化,通过上面两个操作后就可以成功播放视频;
调用代码实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://open.ksedu.cn/Scripts/JKScripts/bootPlayerLib.js"></script>
<script src="http://open.ksedu.cn/Scripts/JKScripts/initPlayerWidget.js"></script>
<script>
$(function () {
jklib.InitPlayer({
//flowplayer的Id,也就是下面a连接的Id
flowplayerId: "flowPlayer",
//是否自动播放
autoplay: false,
//视频Id
videoId: "0260bf86-d894-41b7-adb6-b39b4fc3c1a8",
//截图发送的服务器
shotScreenUrl: "http://192.168.1.169:10007/Savepicture.ashx",
//视频开始播放触发的事件
onStart: function () { alert("开始播放!"); },
//视频暂停时触发的事件
onPause: function () { alert("暂停!"); },
//视频重新播放时触发的事件
onResume: function () { alert("重新开始!"); },
//视频播放完成时触发的事件
onFinish: function () { alert("结束!"); },
//截取图片成功后执行的处理(url为图片绝对路径,jobject为用户自定义属性)
onShotScreenSuccess: function (url, jObject) {
//获取图片的标签
var jietu = document.getElementById("jietu");
//设置图片的属性
jietu.setAttribute("src", url);
}
});
});
//截取图片
function screenShot() {
jklib.givescreenShot();
}
//现在时间
function getTime() {
var nowTime = jklib.getTime();
alert(nowTime);
}
//指定时间
function seekTime() {
var giveSeekTime = $("#seekTimeNow").val();
jklib.seek(giveSeekTime);
}
//暂停和播放
function startAndPauselocal() {
if (jklib.isPlaying()) {
jklib.pause();
} else if (jklib.isPaused()) {
jklib.resume();
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" style="display: block; width: 667px; height: 500px;
margin: 0px auto;" id="flowPlayer"></a><br />
<input type="button" value="截图" onclick="screenShot()" />
<input type="button" value="播放\暂停" onclick="startAndPause()" />
<input type="button" value="现在时间" onclick="getTime()" />
<input type="button" value="指定时间" onclick="seekTime()" /><input type="text" id="seekTimeNow" />
<img id="jietu" src="" alt="截取的图片" style="width: 200px; height: 160px;" />
</body>
</html>