jw player 6 断点续播 seek()
在做項目的時候 ? 客戶提出要有斷點續(xù)播的功能 ? 就是 記住播放點 下次打開的時候 跳到記住的播放點 ?繼續(xù)播放。
? 項目用的 是的jw player 播放器 （v6.9 ）
實現(xiàn)方式是 ? cookie記住播放時間點 playTime ?下次播放的時候 取出播放點playTime ?調(diào)用seek() 方法 跳到指定位置播放
實現(xiàn)過程中 出現(xiàn)的問題：?
1. autostart 參數(shù)不能和seek()方法同時使用
2. 當播放的視頻流是http 形式的流時 ?seek 不起作用 (5.0的支持 這個主要還是得看播放器版本)
? ? ? ?3. 記住播放點 ? 剛開始用的是沒10s 寫一次cookie ?覺的這樣太麻煩了 而且對機器的性能也有影響 ? 后來通過搜索發(fā)現(xiàn) 可以用onbeforeunload 方法 在用戶每次刷新或者關閉之前寫cookie ?這樣就好多了
具體代碼實現(xiàn)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>斷點播放 demo</title>
<style type="text/css">
body
{
text-align: center;
}
#myElement{
width: 680px;
height: 510px;
margin-top:50px;
margin-left:280px;
}
</style>
<script type="text/javascript" src="jwplayer-6.9/jwplayer.js" ></script>
</head>
<body>
<div id="big">
<div id="myElement">Loading the player...</div>
</div>
<script type="text/javascript">
jwplayer("myElement").setup({
?// image: "http://content.jwplatform.com/thumbs/3XnJSIm4-640.jpg",
?// file: "http://content.jwplatform.com/videos/3XnJSIm4-kNspJqnJ.mp4",
? //file:"rtmp://localhost/replay/mp4:2014-08-08_10-50-43/movie/movie",
? ? file:"rtmp://localhost/replay/flv:2014-08-08_10-53-20/movie/movie",
? // file : "http://localhost:8080/jwplayer/mp4720.mp4",
? mute:true, // 靜音
// ?autostart:true
});
var cookieName = "playTime";
var playTime = 0;
function rectime(){
playTime = jwplayer().getPosition();
setCookie(cookieName,playTime);
}
if (getCookie(cookieName)) {
playTime = getCookie(cookieName);
}
//alert(playTime);
jwplayer("myElement").seek(60); // seek 方法 不能和autostart同時使用 ? http 流不支持seek播放
//var timenow=setInterval('rectime()',2000);
window.onbeforeunload = rectime;
/******* 斷點續(xù)播 ?COOKIE ?START ? ? ********************************************/
function setCookie(name,value){
var Days = 30;
var exp = new Date();?
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
// alert(document.cookie);
}
//讀取cookies
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
//刪除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
/******* 斷點續(xù)播 ?COOKIE ?END ? ? ********************************************/
</script>
</body>
</html>
將代碼拷貝下來 保存為一個html文件放到web服務器下就行了。
至于流媒體服務器fms的搭建 可以上網(wǎng)上搜 ?有教程
總結
以上是生活随笔為你收集整理的jw player 6 断点续播 seek()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 揭秘慕思“智商税”：狂砸40亿搞营销，发
- 下一篇： 淘宝API开发系列---阿里.聚石塔.开