带有MobileJQuery的HTML5视频播放列表将不会播放第一个视频

Question

我有以下HTML5和Java脚本代码。

问题：此代码将不会显示索引0处的第一个视频剪辑。

代码正常播放所有剩余的视频片段（从索引1开始）。

该代码可在上实时获取

http://mvl.ecs.soton.ac.uk:8080/JustPlayList.jsp

这段代码显然将在支持HTML5的浏览器中运行。

任何关于如何播放第一个视频剪辑的帮助都将不胜感激。

非常感谢，

<div id="VideoContainer"></div>
<div id="num"></div> <script>
var URLArray = new Array();
URLArray[0] = "/VideoContents/AtomVideo/AtomPart1/AtomPart1C.mp4";
URLArray[1] = "/VideoContents/AtomVideo/AtomPart2/AtomPart2C.mp4";
URLArray[2] = "/VideoContents/AtomVideo/AtomPart4/AtomPart4C.mp4";
URLArray[3] = "/VideoContents/AtomVideo/AtomPart5/AtomPart5C.mp4";
URLArray[4] = "/VideoContents/AtomVideo/AtomPart6/AtomPart6C.mp4";
URLArray[5] = "/VideoContents/AtomVideo/AtomPart7/AtomPart7C.mp4";  
</script>
<script>
$(document).ready(function()
{    
NextFrag();
});
var index=0;
function NextFrag(){
      if (index < URLArray.length)
  {
     alert("Index Value is :" + index); 
         $("#VideoContainer").html('<video  id="video1" controls autoplay > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
         $("#num").html('Displaying Part : ' +(index+1) + ' ' );
         index++;
         $("#video1").bind( "ended", NextFrag);
  }
}
</script>

Answer 1

您的代码似乎没有任何问题，但我认为您正在与jQuery mobile进行奇怪的交互。因此，解决方案似乎如下。将HTML封装在<div data-role="page">中，告诉jQM这是一个移动页面，然后将代码放在pageinit而不是document.ready中http://jsfiddle.net/ezanker/Ep52A/

<div data-role="page">
    <div data-role="content">
        <center>
          <h1>Test Page</h1><h3>Test Page</h3><br /><br />
          <div id="VideoContainer"></div>
          <div id="num"></div>
          <button>Go to Previous Part</button>
          <button>Go to Next Part</button>
        </center>
    </div>             
</div>

这是调用nextFrag:的代码

var index = 0;
$(document).on("pageinit", function(){    
    NextFrag();
});

更新：jQM文档解释了问题：http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/

另请注意：如果您的主体不包含datarole="page"div，jQueryMobile会将主体的全部内容包装在一个pagediv中，如上所述。jQuery Mobile使用jQuery的wrapAll（）方法来完成这项工作，该方法在被包装的内容中查找任何脚本标记，并通过XHR加载每个脚本源。如果正文中存在脚本，浏览器最终会加载它们两次。因此，我们强烈建议在jQueryMobile文档中包含脚本的文档也包含一个datarole="page"的div。

因此，页面中的脚本在初始化时被加载了两次，调用NextFrag两次，最后出现在第二个片段而不是第一个片段上。