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

Question

好的，我做了很多挖掘，但找不到任何关于这方面的信息。我试图让jquery插件OkVideo使2"节"标签有不同的视频在每个但是，即使我重命名的容器是专门标识视频加载在一个容器。

。

<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后面附加了newtarget，例如

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 url，使用jquery追加将新的html视频代码插入到适当的代码部分。

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

下面是我需要"追加"的代码:

将示例视频id"HkMNOlYcpHg"替换为您的youtube视频id，并将example.com替换为您的web域名。

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