Question

好的，所以我做了很多挖掘工作，找不到任何关于此的信息。我正在尝试获取jquery插件OkVideo使2“section”标签在每个中都有不同的视频，但即使我将容器重命名为特定ID，视频也会在一个容器中加载。

e.g。

<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';

添加到页面的所有项目都将新目标附加到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')
        });
 });

这可能会被加强，但正如我匆忙一样，这就是这个有效的解决方案。

Answer 2

我花了几个小时研究这个问题。这个选择的解决方案不是非常有用，所以我有一个可行的，但肯定不太理想的解决方案。我的目标是在使用jquery.fullPage.js导航时有两个全屏背景视频。

OKVideo注入html启用视频，我为我的第一个视频抓取了这个html并更改了youtube网址，使用jquery追加将新的html视频代码插入到正确的代码部分。

我遇到的一个问题是视频没有正确重复 - 但是一旦结束，我就使用jquery来淡出视频ID。我敢肯定，如果你想重复它，你可以简单地将代码放入一个js循环。

以下是我需要'追加'的代码：

将示例视频ID“HkMNOlYcpHg”替换为您的YouTube视频ID，并将example.com替换为您的网络域。

   jQuery('#section3').append('<div id="okplayer-mask1" style="position: 
absolute; left: 0px; top: 0px; overflow: hidden; z-index: -998; height: 100%; 
width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAPABAP
///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D);"></div><iframe id="okplayer1" 
style="position:absolute;left:-10%;top:-10%;overflow:hidden;z-index:-999;
height:120%;width:120%;" frameborder="0" allowfullscreen="1" title="YouTube video 
player" width="640" height="360" src="https://www.youtube.com/embed
/HkMNOlYcpHg?autohide=1&amp;autoplay=1&amp;cc_load_policy=0&amp;controls=3&
amp;enablejsapi=1&amp;fs=0&amp;modestbranding=1&amp;origin=http%3A%2F
%2Fexample.com&amp;iv_load_policy=3&amp;loop=1&amp;showinfo=0&amp;rel=0&
amp;wmode=opaque&amp;hd=1"></iframe>');

OKVideo两个视频在一页不同的部分

2 个答案: