0

次のコードを使用していますが、iOS（ipad / iphone）のfancybox内のjwplayerでビデオが再生されません...それ以外の場合は正常に動作します。iOSがフラッシュを処理しないことを感謝しますが、html5フォールバックを提供するためにこのコードを変更する方法がわかりません...

<script type="text/javascript" src="scripts/jwplayer/html5/jwplayer.html5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".video_popup").fancybox({
    fitToView: false, // to show videos in their own size
    content: '<span></span>', // create temp content
    scrolling: 'no', // don't show scrolling bars in fancybox
    afterLoad: function () {
      // get dimensions from data attributes
      var $width = $(this.element).data('width'); 
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='scripts/jwplayer/player.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
4

2 に答える 2

2

RTMP を使用できる Flash とは異なり、iOS は HTTP プロトコルを介したビデオ ストリーミングのみをサポートします。HTML5 フォールバック ソリューションを使用して JWPlayer を構成する方法の構成例は、ドキュメントにあります。

ただし、次の行に注意する必要があります。

'provider': 'rtmp',
'streamer': 'rtmp://rtmp.example.com/application',
'file': 'sintel.mp4'

前述のように、iOS は HTTP 経由のストリーミングのみをサポートするため、次のようなものが必要になります。

'provider': 'http',
'streamer': 'http://rtmp.example.com/application',
'file': 'sintel.mp4'

もちろん、ストリーミング サーバーは HTTP 経由のストリーミングもサポートしている必要があります。

編集

ファンシーボックスで JWPlayer をセットアップするには、通常どおりメソッドを使用できます。Fancybox と JWPlayer を一緒に使用することは特別なことではありません。

HTML

<div class="video_popup">
    <div id="mediaplayer">Here the player will be placed</div>
</div>

Javascript（あなたの質問から適応）

$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, // to show videos in their own size
  scrolling: 'no', // don't show scrolling bars in fancybox
  afterLoad: function () {
    // get dimensions from data attributes
    var $width = $(this.element).data('width'); 
    var $height = $(this.element).data('height');

    // now, use JWPlayer to setup the player instead of embedding Flash
    jwplayer('mediaplayer').setup({
      // configuration code as in the documentation
    });
  }
});
于 2013-02-13T05:45:13.817 に答える
0

w4rumy の助けを借りて、html5 を使用して fancybox で jwplayer を動作させることができたので、ipad/iphone で再生します。

<script type="text/javascript" src="scripts/jwplayer6/jwplayer.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
  $(".video_popup").fancybox({
  fitToView: false, 
  scrolling: 'no', 
  content: '<div id="myvideo"></div>',
  afterShow: function () {
   jwplayer('myvideo').setup({
        file: this.href,
        autostart: 'true',
         modes: [
        {type: 'flash', src: 'scripts/jwplayer6/jwplayer.flash.swf'},
        {type: 'html5', config: {file: this.href, provider: 'video'}},
    ]
    });
  }
});
于 2013-02-14T04:29:14.673 に答える