2012-03-28 72 views
0

我正在开发一个移动网站与jQuery的移动,它适用于所有平台上没有iOS的完美。我试图删除jQuery的移动脚本,然后加载视频,但页面的其余部分然后很糟糕。这是一部mp4电影。只有在iOS上的jQuery移动问题,当显示电影

使用版本jquery-mobile-1.0和video-js。

任何人都有同样的问题?

<div class="vjs-container"> 
<div class="videoWidth video-js-box test-css vjs-controls-below vjs-paused" style="width: 1809px;"> 
    <video height="416" width="720" data-subtitles="/sites/video/PublishingImages/test/test.jpg" poster="" preload="metadata" x-webkit-airplay="allow" class="video-js" tabindex="0" style=""> 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="/sites/video/PublishingImages/test/test.mp4"></source> 
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="/sites/video/PublishingImages/test/test.ogv"></source> 

     <div class="vjs-flash-fallback"> 
      <img height="416" width="720" title="Ingen mulighet til å spille av video." alt="Ingen mulighet til å spille av video." src="/Style%20Library/gui/video-fail.jpg"> 
     </div> 
    </video> 
    <!-- Download links provided for devices that can't play video in the browser. --> 
    <p class="vjs-no-video" style="display: none;"> 
     <strong>Last ned video:</strong> <a href="/sites/video/PublishingImages/test/test.mp4">MP4</a>, 

     <a href="/sites/video/PublishingImages/Oppakning/test.ogv">Ogg</a><br> 
     <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS 
    </p> 
<div class="vjs-styles-check" style="position: absolute; display: none;"></div><img src="http://m.test.aspx" class="vjs-poster" style="display: block; height: 1045px; width: 1809px;"><div class="vjs-big-play-button" style="display: block;"><span></span></div><div class="vjs-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="vjs-controls"><div class="vjs-play-control"><span></span></div><div class="vjs-progress-control"><div class="vjs-progress-holder"><div class="vjs-load-progress" style="width: 24.01%;"></div><div class="vjs-play-progress" style="width: 0%;"></div></div></div><div class="vjs-time-control"><span class="vjs-current-time-display">00:00</span><span>/</span><span class="vjs-duration-display">00:00</span></div><div class="vjs-volume-control"><div><span class="vjs-volume-level-on"></span><span class="vjs-volume-level-on"></span><span class="vjs-volume-level-on"></span><span class="vjs-volume-level-on"></span><span class="vjs-volume-level-on"></span><span></span></div></div><div class="vjs-fullscreen-control"><div><span></span><span></span><span></span><span></span></div></div></div></div> 

<div class="clear"></div> 

回答

1

因为jQueryMobile动态加载你的页面,你需要使用VJS的动态设置。你可以read about it in the documentation on their website

你可能会想这样做的jQuery的pageInit,像这样:

$('#videoPage').live('pageinit',function(event){ 
_V_("example_video_1", {}, function(){ 
     // Player (this) is initialized and ready. 
    }); 
}); 
+0

但为什么它在WP7和Android的工作?这只是iOS中的一个问题。如果这是唯一的解决方案,我将有一个问题在每个视频上都有相同的选择器。 – Plexus81 2012-03-29 12:33:14

+0

可能是两个系统之间渲染时间的差异。 – 2012-03-29 13:53:07

2

我也想有如下所示的画面这个问题碰到过,但是我已经把它钉 with a mark that says cann't be played

2天后调试,试验和错误,我把下列行为(我建议你遵循,太):

  1. 升级jquerymobile LIB到最新版本(版本1。 3.1), 视频js.js(4.1.0版本)
  2. 得到一个普通网络服务器(nginx的,阿帕奇,Tomcat的...)担任视频

我想澄清的是jquerymobile正在与视频-js

并解释多了几分行动2

我们可以从快照中看到的,存在表示视频标记无法播放。 和我检查应用程序日志, clues from app log

服用,考虑该视频是由发展ENV运行的进程提供服务(排序在Python的工具包,它的的runserver命令从Django的) 。

每次我通过iPad请求视频资源时都会发生异常。 因此,我改变了我的系统中的视频提供商,说nginx,它确实工作!

成功的快照如下: successful video served by nginx