如何使用jqtouch加载媒体播放器播放视频或音频文件?

问题描述:

我目前正在使用jqtouch在轨道上开发我的红宝石到iPhone应用程序。我无法弄清楚如何加载媒体播放器来播放音频/视频文件。有人知道吗?如何使用jqtouch加载媒体播放器播放视频或音频文件?

要添加影片页面jqtouch(改编自jqTouch demo page):

<!doctype html> 
<html> 
    <head> 
     <title>Video Demo</title> 
     <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.css";</style> 
     <style type="text/css" media="screen">@import "../../themes/jqt/theme.css";</style> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
     <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $('#play_movie').bind('tap', function(){ 
     $('#movie').get(0).play(); 
     $(this).removeClass('active'); 
    }); 

    $('#video').bind('pageAnimationStart', function(e, info){ 
     $('#movie').css('display', 'none'); 
    }).bind('pageAnimationEnd', function(e, info){ 
     if (info.direction == 'in') 
     { 
      $('#movie').css('display', 'block'); 
     } 
    }); 
    </script> 
</head> 
<body> 
    <div id="jqt"> 
     <div id="home" class="current"> 
      <div class="toolbar"> 
       <h1>Video Demo</h1> 
       <a class="button slideup" id="infoButton" href="#about">About</a> 
      </div> 
      <ul class="rounded"> 
       <li class="arrow"><a href="#video">Video</a></li> 
      </ul> 
     </div> 
     <div id="video"> 
      <div class="toolbar"> 
       <h1>Video</h1> 
       <a class="back" href="#">Home</a> 
      </div> 
      <video id="movie" src="video/fireworks.mov" poster="video/fireworks.jpg" width="320" height="426" controls></video> 

      <a href="#" style="margin: 10px;" id="play_movie" class="whiteButton">Play Movie</a> 
     </div> 
    </div> 
</body> 
</html>