12

我正在使用它的pause()方法暂停视频..问题是音频继续播放...我还尝试从 Firefox 的 Javascript 控制台暂停它...没有任何反应。该视频为 .ogg 格式，甚至无法在 Chrome 中播放（因为我认为它不受支持）。我在 Amazon S3 上托管了视频，它完美地流式传输。我正在动态创建元素，从 JSON 请求中加载其信息。这是一些代码：

function showVideo() {
        var video = videodata;

        var videobox = $('#videobox').first();
        var videoplayer = document.getElementById('videoplayer');

        if (video.Enabled) {
            if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) {
                console.log('Creating video elem');
                videobox.empty();
                videobox.append('<video id="videoplayer" preload="auto" src="' +
                  video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
                videobox.show();
            }
        } else {
            if (videoplayer != null) {
                videoplayer.pause();
                console.log('Pausing video...');
            }
            console.log('Deleting video elem');
            videobox.hide();
            videobox.empty();
        }
    }

我之前已经发布了一个类似的问题......但现在我正在使用其他浏览器，所以我想我必须创建一个新问题。

这是工作代码（感谢用户h​​eff！）

function showVideo() {
    var video = videodata;

    var videobox = $('#videobox').first();
    var videoplayer = document.getElementById('videoplayer');

    if (video.Enabled) {
        if ((videoplayer.src != video.Location) || videoplayer.src == '') {
            console.log('Playing video: ' + video.Location);
            videoplayer.src = video.Location;
            videoplayer.load();
            videoplayer.play();
            videobox.show();
        }
    } else {
        if (videoplayer.src != '') {
            console.log('Pausing video...');
            videoplayer.pause();
            videoplayer.src = '';
            videobox.hide();
        }
    }
}
4

2 回答 2

10

我有一个类似的问题，用非常棒的编码器解决了。看看这篇文章。它可能很有用。HTML5 视频控件不起作用

如果您使用的是 html 属性：

<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls width="100%">
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">        
</video>

删除自动播放。

然后使用 jquery 来使用自动播放：

$(document).ready(function() { $("#bigvid3").get(0).play(); });

至于来源有多个位置： html5 视频播放两次（音频加倍）与 JQuery .append()

和

使用 jQuery 在 Dom Load 上自动播放 HTML5 视频

于 2016-03-16T19:04:29.527 回答
5

我的猜测是 showVideo 以某种方式被调用了两次，并创建了两个副本，其中一个即使在您调用另一个暂停后仍会继续播放。

在您的代码中，videoplayer var 不会引用您稍后使用 append 创建的视频标签，它将指向之前具有该 id 的任何内容，我假设当您清空盒子时它会被删除，但可能会留在内存中（并继续播放声音）。

只是我最好的猜测，但无论哪种方式，最好使用视频元素的 API 来设置源和其他参数，而不是清空盒子并重建标签。

videoplayer.src = video.Location;
videoplayer.autoplay = true;
// etc.

此外，100% 不是宽度/高度属性的有效值。您需要使用 CSS 使视频拉伸以填充一个区域。

于 2012-08-08T00:50:07.193 回答