Question

我已将视频加载到搜索结果页面中。在mouseenter上，我想将视频的预览加载到一个单独的div中。然后视频将开始在div中播放。

$(".videoSearchResults video").mouseenter(function () {
    var container = document.createElement("div");
    $(container).attr("class", "videoOverlay");
    $(container).css({
        "position": "relative",
        "padding": "5%",
        "height": "130px",
        "background-color": "rgb(211, 209, 209)",
    });
    var sources = $(this).html();
    var clip = "<video autoplay='autoplay' style='max-width: 100%; height: 120px;'>" + sources + "</video>";
    var output = clip;
    $(container).append(output);
    $(this).parent().append(container);
    $(clip).get(0).play();

该解决方案适用于Firefox，但视频无法在Chrome中播放。是否有解决方案可以在Chrome中使用它？

Answer 1

您必须始终将clip作为jQuery对象，否则您将在最后一行创建一个具有相同代码的新对象（$(clip).get(0).play();）

这应该有效：

var clip = $("<video autoplay='autoplay' style='max-width: 100%; height: 120px;'>" + sources + "</video>");
var output = clip;
$(container).append(output);
$(this).parent().append(container);
clip.get(0).play();

Answer 2

我在Chrome中的视频遇到了类似的问题。

尝试在视频HTML字符串中添加ID，然后再将其添加到标记中，然后再添加

var vid = document.getElementById('clip');
clip.play()

无法在Chrome中使用鼠标悬停播放视频

2 个答案: