Test page(在iPhone上无法正常工作)
我的网站上有数百个视频,我想更换他们的空缺。为了避免再次重新渲染所有视频,我使用以下代码将新开头添加为将在原始视频之前播放的播放列表项目,然后在播放原始视频时,前20秒(其中)旧开口即将被削减。
<html>
<head>
<script src="/templates/it_365news/js/jwplayer/jwplayer.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$('#ready').html('document is ready at ' + new Date().getMinutes() + ":" + new Date().getSeconds() + ":" + new Date().getMilliseconds())
})
</script>
</head>
<body>
<div id="vp0">
</div>
<div id="ready" style="background:yellow">
</div>
<div id="vr" style="background:red">
</div>
<div id="vl" style="background:blue">
</div>
<script>
jwplayer.key = 'bwIDfauoN3m+MClNdkQb0YamUxTfzWw7ygugtA==';
jwplayer('vp0').setup({
"file": "http://video.jiuan.org/2017/May/luntan.mp4",
"image": "http://www.jiuan.org/ffmpeg_image.php?file=2017/May/luntan.mp4&time=00:00:03&browser=true",
"width": "100%",
"aspectratio": "16:9"
})
</script>
<script>
var jw = jwplayer('vp0');
var file = jw.getPlaylistItem('0').file;
var image = "http://www.jiuan.org/ffmpeg_image.php?file=2017/May/UNG1.mp4&time=00:00:09&browser=true";
var title = jw.getPlaylistItem('0').title;
var openning = {"file": "/videos/UNG.mp4","image": image,"title":title};
var video = {"file":file};
jw.setup({
"playlist":[openning,video],
"visualplaylist": "false",
"width": "100%",
"aspectratio": "16:9"
})
.on('playlistItem',function(){
$('#vr').html('video is ready at ' + new Date().getMinutes() + ":" + new Date().getSeconds() + ":" + new Date().getMilliseconds());
if (this.getPlaylistIndex() === 1){
$('#vl').html("cut");
this.seek(20);
$('#vl').append('done');
}
});
</script>
</body>
</html>
这适用于Windows PC,Mac book air和Android手机,但是当涉及到iPhone时,新的开场成功添加,但旧的开放仍在播放,即this.seek(20)
似乎无法正常工作。有更好的调试方法吗?还有其他方法可以实现我的目标吗?