相关疑难解决方法(0)

如何检测HTML5 <video>元素何时播放完毕？

我一直在使用基于闪存的JWPlayer 4和播放列表选项.最近我升级到JWPlayer 5,声称支持HTML5.播放器本身在支持HTML5但不支持闪存的移动设备上很好地降级,但是它会在启用播放列表选项时中断.

那么有人可以告诉我我在JWPlayer 5上做错了什么以及如何使用移动设备的播放列表选项,或者只是教我一个更好的方法来设置HTML5的视频和播放列表？

资源

1. JW播放器和播放列表配置示例页面

2. JWPlayer和播放列表布局的示例:

screenshot-with-shadow.jpg http://img198.imageshack.us/img198/5788/screenshotwithshadow.jpg

我们使用Sencha touch在html5和javascript中构建了面向音乐的应用程序.为了分发,我们用UIwebView将它包装在xcode中.一切都运行良好,除了一件不起作用的东西:音频在多任务模式下播放.

我知道一般的想法:在info.plist中添加UIBackgroundModes.

完成.现在我们甚至可以在后台模式下播放音频.

直到我们到达歌曲的结尾.要开始下一首歌,我们必须再次将应用程序带到前台,或者我们可以点击iPhone音频控制器上的播放或"下一首歌"按钮.

经过一些研究后,我找到了一个很有前途的解决方法:" 在iOS4上输入背景来播放音频 ",其中解决方法是编辑AVAudioSessionCategoryPlayback并使用UIBackgroundTaskIdentifier.对我来说问题是(就像我到目前为止发现的任何其他修复方式一样),这些解决方案总是假设音频是用AVaudioPlayer或MPMusicPlayerController播放的.但在我的情况下,我既没有使用,我们的音频也是由包含在UIwebView中的html5播放器播放的.

当音频播放器是html5/javascript播放器时,任何人都有关于如何在iOS多任务模式下继续播放音频的建议？

如何在主视频播放之前在 html5 视频标签上插入广告？是否有任何开源工具可以使这更容易？有什么参考资料可以指导我去那里吗？

它正在使用此代码：

<script type="text/javascript">
   // listener function changes src
   function myNewSrc() {
      var myVideo = document.getElementsByTagName('video')[0];
      myVideo.src="../main.webm";
      myVideo.load();
      myVideo.play();
    }

   // function adds listener function to ended event -->

    function myAddListener(){
     var myVideo = document.getElementsByTagName('video')[0];
     myVideo.addEventListener('ended',myNewSrc,false);
    }
</script>

但是当它播放第二个时我不能。它显示了海报。我如何摆脱海报？

我正在尝试构建一个能够无缝串联播放视频URL列表的视频序列器.视频之间不能有差距; 播放需要尽可能接近帧精确.

尝试#1我使用了一种相当明显和直接的方法,类似于这个线程中提到的方法. HTML 5视频或音频播放列表

这种方法的问题在于,每当一个视频结束并且后续视频被指定为新源时,该新视频仍然需要加载,从而导致可能存在长的差距.如果甚至可以在video.src中命名之前强制所有视频都进行预加载,那么这种方法仍然有效.

尝试#2我重写了脚本,因此列表中的每个视频都会导致创建一个单独的视频元素,但不会附加到文档中(使用createElement).然后,当每个视频结束时,我删除了前一个节点并附加了下一个元素.

在页面加载时执行的代码:

for (i in timelinePlay)
    if (timelinePlay[i] != null)        
    {
        var element = document.createElement('video');
        element.id = 'video1-' + (i);
        element.src = timelinePlay[i]['URL'];
        element.preload = 'load';
        video1Array[i] = element;
    }

视频'已结束'活动代码:

videoElement.addEventListener("ended", function (event) {
    if (this.currentTime > 0)
    {
        if (player.hasChildNodes())
            while (player.childNodes.length > 0)
                player.removeChild(player.firstChild);

        player = document.getElementById('canvas-player');
        player.appendChild(video1Array[timelineCurrent]);

        nextVideo = document.getElementById('video1-' + timelineCurrent);

        nextVideo.play();

        timelineCurrent++;
    }
}, false);

(请注意,这些代码示例是部分的,并且有些简化.另外,我确实认识到我将对象用作关联数组不是最佳实践)

这种修改的结果更接近,因为视频现在在他们被要求播放时加载,但视频之间仍然存在短暂且不一致的差距.

尝试#3我用'timeupdate'监听器替换了'ends'事件监听器,开头如下:

nextVideo.addEventListener("timeupdate", function (event)
{
    if (this.currentTime > (this.duration - 0.1)  && this.currentTime > 1) …

嗨<我想知道是否有人知道如何在HTML 5中构建视频播放列表的教程？我也希望这些视频以随机顺序播放.