1

管状プラグイン ( http://www.seanmccambridge.com/tubular/ ) を使用して、微妙な HTML ビデオ背景を作成しています。これは Chrome では機能しますが、Mac の Safari 7 ではビデオが開始されません。

サファリがビデオを自動起動しない理由である z-index に絞り込みました。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 のコンテンツがあると、まるでビデオが始まらないかのようです。

4

2 に答える 2

2

私はフルスクリーンの YouTube ビデオを必要とするプロジェクトのために jQuery Tubular をバラバラにハッキングしてきましたが、当初考えていたよりもはるかに進んでいました。私もこれに遭遇し、コールバックやその他の機能を提供するために既にチューブラーを変更していたため、プラグインを簡単に交換することはできませんでした.

これは私がサファリを修正した方法です：

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 プレーヤーの使用を奨励するhtml5: 1です。Safari がデフォルトで Flash を使用するようになった理由はわかりませんが、そうであり、それが私にとっての問題でした。Flash などのプラグインに影響を与える「バッテリー節約」モードがあるようです。

于 2014-08-15T21:41:07.947 に答える