Safari 7 (mac) 中未启动的管状 jquery 视频

Question

我正在使用管状插件 (http://www.seanmccambridge.com/tubular/) 创建一个微妙的 html 视频背景。这在 Chrome 中有效，但在 Mac 上的 Safari 7 中，视频无法播放。

我已将其缩小到 z-index 是 safari 不会自动启动视频的原因。当我将tubularContainer 的z-index（默认为1）更改为高于我的其他内容（例如9999）的值时，视频开始正​​常。

var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top: 0;"></div>';

有谁知道如何规避这种狩猎行为？就好像视频在 z-index 上方有内容时无法开始一样。

Answer 1

该插件似乎与 Safari 的省电功能不兼容。 Safari 甚至不会在自己的主页上播放视频..

我改用Jquery-MB-YTPlayer

Answer 2

我一直在为一个需要全屏 YouTube 视频的项目破解 jQuery Tubular，但结果比我最初想象的要走得更远。我也遇到了这个问题，由于已经更改了 Tubular 以提供回调和其他功能，因此无法简单地更换插件。

这就是我修复 safari 的方式：

window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('tubular-player', {
        width: options.width,
        height: Math.ceil(options.width / options.ratio),
        videoId: options.videoId,
        playerVars: {
            controls: 0,
            showinfo: 0,
            modestbranding: 1,
            wmode: 'transparent',
            rel: 0,
            autoplay: 1,
            html5: 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

（这是直接在 jquery.tubular.js 中修改的代码）

要注意的主要是 html5: 1，它鼓励使用 HTML5 播放器。我不知道为什么 Safari 默认使用 Flash，但它是，这对我来说是个问题。显然有一些“省电”模式会影响 Flash 等插件。