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

我正在使用以下代码，但video不能与iOS（ipad / iphone）上的fancybox内的jwplayer一起播放…否则工作正常。 我很欣赏iOS不处理flash，但我不确定如何修改此代码以提供html5后备…

  $(document).ready(function() { $(".video_popup").fancybox({ fitToView: false, // to show videos in their own size content: '', // 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 = ""; } }); 

Answer 1

iOS仅支持通过HTTP协议的video流，与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

 
 
Here the player will be placed
  

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上播放：