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 Doc解释了问题：http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/

另请注意：如果您的正文中不包含data-role =“page”div，则jQuery Mobile会将正文的全部内容包装在页面div中，如上所述。 jQuery Mobile使用jQuery的wrapAll（）方法执行此操作，查找正在包装的内容中的任何脚本标记，并通过XHR加载每个脚本源。如果正文中存在脚本，则浏览器最终会加载两次。因此，我们强烈建议在其正文中包含脚本的jQuery Mobile文档也包含一个带有data-role =“page”的div。

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

使用MobileJQuery的HTML5视频播放列表不会播放第一个视频

1 个答案: