javascript - OKVideo 在一页不同部分中显示两个视频

Question

好吧，我已经做了很多挖掘，但找不到任何相关信息。我试图让 jquery 插件 OkVideo 使 2 个“部分”标签在每个标签中都有不同的视频，但是即使我将容器重命名为专门 ID，视频也会加载到一个容器中。

例如

<section>
    <div id="container1"></div>
</section>
<section>
    <div id="container2"></div>
</section>

$('#container1').okvideo({
    source: 'Video1 Url',
    volume: 0,
    loop: true,
    hd: false,
    adproof: true,
    annotations: false
});
$('#container2').okvideo({
    source: 'Video2 URL',
    volume: 0,
    loop: true,
    hd: false,
    adproof: true,
    annotations: false
});

现在，上面的内容导致第二个视频覆盖其容器中的第一个视频。这不是想要的效果。有人可以建议一个类似的插件，允许这个或覆盖使其工作，而不需要重新编码插件 javascript 的一半吗？

Answer 1

是的，经过几个小时的战斗，我终于通过重新调整 okfocus okvideo 来解决这个问题，使用一个额外的选项“newtarget”来识别页面上是否有多个视频。

if (base.options.newtarget == undefined) {
     base.options.newtarget = "";
}

var target = $("#" + base.options.newtarget) || base.options.target || $('body');
var position = target[0] == $('body')[0] ? 'fixed' : 'absolute';

添加到页面的所有项目都将 newtarget 附加到 ID，例如

target.append('<div id="okplayer' + base.options.newtarget + '" style="pos.....

然后我们将选项添加到窗口数据设置中，每个选项设置都将 newtarget 作为其命名约定的一部分(请确保将其格式化为小写并去掉多余的“-”等)

$(window).data('okoptions' + options.newtarget.replace('-', '').toLowerCase(), base.options);

然后找到函数 onYouTubePlayerAPIReady() 或 vimeo 的 vimeoPlayerReady() 并使用页面上视频的类选择器对其进行扩展

 $(".videoClass").each(function(e) {
 options = jQuery(window).data('okoptions' + $(this).attr('id').replace('-', ''));....

添加这些后，您可以添加一个不显眼的功能来添加所有选项

 var collection = $(".videoClass");
 collection.each(function () {
 $("#" + $(this).attr('id')).okvideo({
        source: $(this).attr("data-link"),
        volume: 0,
        loop: true,
        hd: false,
        adproof: true,
        annotations: false,
        newtarget: $(this).attr('id')
        });
 });

这可能可以整理一下，但由于我很着急，所以这是一个有效的解决方案。