在 Chrome 中删除 <video> 元素后音频继续答案

【问题标题】：Audio continues after removing <video> element in Chrome在 Chrome 中删除 <video> 元素后音频继续
【发布时间】：2012-01-28 13:05:28
【问题描述】：

我在 Chrome 中遇到视频支持问题。我的网页必须在 Chrome 中运行，我正在使用以下代码定期检查网页是否必须播放视频......但问题是在我删除元素后，我仍然听到音频，当我重新创建元素，新视频的音频和旧的重叠。

function showVideo() {
        var video = videodata;

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

        if (video.Enabled) {
            if ((videoplayer.length > 0 && videoplayer[0].currentSrc != video.Location) || videoplayer.length == 0) {
                videobox.empty();
                videobox.append('<video id="videoplayer" preload="auto" src="' + video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
                videobox.show();
            }
        } else {
            videobox.hide();
            videobox.empty(); // Clear any children.
        }
    }

我该如何解决？

谢谢。

【问题讨论】：

标签： html google-chrome video

【解决方案1】：

以下是我必须去让它工作的最低限度。当用户按下后退按钮时，由于在产生 ajax 请求时缓冲，我实际上遇到了停顿。在 Chrome 和 Android 浏览器中暂停视频使其保持缓冲。非异步 ajax 请求会卡住等待缓冲完成，而它永远不会。

将此绑定到 beforepagehide 事件修复它。

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

这将清除页面上的每个视频标签。

【讨论】：

【解决方案2】：

首先尝试在 html 中创建“video”标签为空，并在 javascript 代码中创建“source”标签

<html>
.
.
<video id="main-video" autoplay=""></video>
.
.
</html>


<script>
   $('#main-video').append('<source type="video/mp4" src="URL.mp4">');
</script>

【讨论】：

【解决方案3】：

就我而言，我必须先暂停视频，然后再将其删除，否则音频仍在后台播放。我之所以使用 pause 是因为 html5 视频元素上没有 stop() 函数。

        } else {
        videobox.hide();

        // you can add something like this
        $("#videoplayer").pause();

        videobox.empty(); // Clear any children.
    }

【讨论】：

jQuery 无法与
要使用 jQuery 直接访问 DOM 元素，您应该使用 $('#videoplayer')[0].pause()。

【解决方案4】：

尝试（基于 SimpleCode 的回答）：

function showVideo() { var video = videodata;

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

    如果（视频。启用）{
        if ((videoplayer.length > 0 && videoplayer[0].currentSrc != video.Location) || videoplayer.length == 0) {
            videobox.empty();
            videobox.append('');
            videobox.show();
            document.getElementById("videoplayer").play();
        }
    } 别的 {
        document.getElementById("videoplayer").pause();
        videobox.hide();
        videobox.empty(); // 清除所有孩子。
    }
}

【讨论】：