Question

我正在使用以下代码，但视频无法在iOS（ipad / iphone）上的fancybox内使用jwplayer ...否则正常工作。我很欣赏iOS不处理flash，但我不确定如何修改此代码以提供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>"; 
    }
  });

Answer 1

iOS仅支持通过HTTP协议进行视频流，与Flash不同，您可以使用RTMP。可以在documentation中找到如何使用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进行流式传输。

修改

为了在fancybox中设置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 }); } });

Answer 2

在w4rumy的帮助下，我设法让jwplayer使用html5在fancybox中工作，所以在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'}},
    ]
    });
  }
});

fancybox中的jwplayer没有在ipad / iphone上播放

2 个答案: