0

我正在使用以下代码，但视频无法在 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>"; 
    }
  });
4

2 回答 2

2

iOS 仅支持通过 HTTP 协议的视频流，不像 Flash 可以使用 RTMP。可以在文档中找到如何使用 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
    });
  }
});
于 2013-02-13T05:45:13.817 回答
0

在 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'}},
    ]
    });
  }
});
于 2013-02-14T04:29:14.673 回答