在phonegap中播放实时流媒体视频

时间:2014-06-16 07:09:15

标签: cordova video-streaming live-streaming strobe-media-playback

我正在尝试使用频闪播放器在手机间隙中播放实时流媒体视频但是当我正在播放时它什么也没显示。我不知道错误在哪里。 我需要在频闪媒体播放中播放实时流媒体视频 我的代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Device Detection Test</title>
        <style type="text/css">
            body {
                font-family: sans-serif;
            }
            .movie {
                width: 100%;
                clear: both;
            }
            .movie div.thumb {
                float: left;
                margin-right: 10px;
                cursor: pointer;
                border: solid 1px blue;
            }
            .movie div.details {
                width: 100%;
                height: 100%;
            }
            .movie div.details p.title {
                font-weight: bold;
                cursor: pointer;
            }
            .movie div.details p.desc {
                font-weight: normal;
            }
            </style>
        <link type="text/css" rel="stylesheet" href="lib/jquery.strobemediaplaybackhtml5.css"/>

        <script type="text/javascript" src="lib/swfobject.js"></script>
        <script type="text/javascript" src="lib/profiles.js"></script>
        <script type="text/javascript" src="lib/devicedetection.js"></script>
        <script type="text/javascript" src="lib/jquery/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="lib/jquery-ui-1.8.14.custom.min.js"></script>
        <script type="text/javascript" src="lib/jquery.strobemediaplaybackhtml5.js"></script>
        <script type="text/javascript" src="lib/StrobeMediaPlayer.js"></script>

        <script type="text/javascript" src="file:///C:/Users/Faizan/workspace/cordova.js" ></script>


        <script>
            var movies = [
                          {
                          "flashvars":{"poster":"http://www.osmf.org/dev/1.6gm/images/poster1.png", "src":"http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4"}, 
                          "element":"clipContainer0"
                          },
                          ];

            $(function() {
              for (i = 0; i < movies.length; i++) {
              strobeMediaPlayback.flashvars(movies[i]["flashvars"]);
              strobeMediaPlayback.draw(movies[i]["element"]);
              }
              });

            </script>
    </head>
    <body>
        <div>
           Strobe Media Playback
        </div>
        <div id="movie0" class="movie">
            <div class="thumb">
                <div id="clipContainer0"></div>
            </div>
            <div class="details"><p class="title">Video One</p><p class="desc">Video one description.</p></div>
        </div>

    </body></html>'

更改订单和cordova.js路径但仍未显示视频 :(

1 个答案:

答案 0 :(得分:0)

js库的顺序似乎是错误的!检查JS库的这个新顺序。

    <script type="text/javascript" src="lib/jquery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="lib/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript" src="lib/swfobject.js"></script>
    <script type="text/javascript" src="lib/profiles.js"></script>
    <script type="text/javascript" src="lib/devicedetection.js"></script>
    <script type="text/javascript" src="lib/jquery.strobemediaplaybackhtml5.js"></script>
    <script type="text/javascript" src="lib/StrobeMediaPlayer.js"></script>

另外,我不确定这一行:

 <script type="text/javascript" src="file:///C:/Users/Faizan/workspace/cordova.js" ></script>

我认为

 <script type="text/javascript" src="cordova.js" ></script>
如果你正在使用phonegap build,那么

是正确的。