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

时间:2010-12-07 15:33:29

标签: iphone ruby-on-rails jqtouch

我目前正在使用jqtouch将我的ruby on rails开发成iphone应用程序。我无法弄清楚如何加载媒体播放器来播放音频/视频文件。有谁知道吗?

1 个答案:

答案 0 :(得分:0)

要将电影页面添加到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>