サイトの各ペインで Twitter Bootstrap Tab-able Panes を使用しています。各ペインには、video.js ビデオが埋め込まれています。
最新バージョンの Safari (私は Windows を使用しています) を除いて、すべての主要なブラウザーですべて正常に動作します。
Safari には 2 つの問題があります。
ブラウザ ウィンドウのサイズを変更しない限り、Video.js コントロールは表示されません。これができたら、もう大丈夫です。注: コードを直接ページに埋め込む場合、これは問題ではありません。問題になるのは、TBS ペインに配置する場合のみです。
ページに複数のビデオ (ペイン内) がある場合、制限があるようです。到達すると (2/3 の場合もあれば 6 の場合もあります)、オーディオが再生されますが、(a) ビデオが「空白」/黒であるか、(b) ビデオが 1 つのフレームで停止します。
非常にイライラします:)どんなアイデアや解決策も高く評価されます。
URL の例: http://kickstart3d.com.au/learn/category/kickstart-leadership/induction/
埋め込みコードの例:
<div id='pane-k3d-424' class='tab-pane active'>
<div class="video-container">
<div class="videoWrapper">
<video id="my_video_721961889" class="video-js vjs-default-skin" poster="http://www.liveyourown.com/video/k3d-video_starthere.jpg" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="http://www.liveyourown.com/video/k3d-induction-intro.mp4" type='video/mp4' />
</video>
</div>
</div>