Question

我正在创建一个包含youtube视频的移动网站。它们没有问题，但问题是当我按下后退按钮时，视频仍然只播放声音。反正有没有阻止这种情况发生？

videoplayer的HTML代码：

<!-- Page: Videos -->
<div id="videos"
    data-role="page"
    data-title="View Source: Videos">
    <div data-role="header"
        data-position="fixed"
        data-id="vs_header">
        <h1>Videos</h1>
        <a href="#home"
            data-icon="home"
            data-iconpos="notext"
            >Home</a>
        <a href="#info"
            data-icon="info"
            data-iconpos="notext"
            data-rel="dialog"
            >Info</a>
    </div><!-- header -->
    <div data-role="content">

<div data-role="content">
    <div class="ui-grid-a" id="videolist">
    </div><!-- grid -->
</div><!-- content -->

    </div><!-- content -->

    <div data-role="footer"
        data-position="fixed"
        data-id="vs_footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#home" 
                data-role="button"
                data-icon="home"
                >Home</a></li>
                <li><a href="#recipes" 
                data-role="button"
                data-icon="vs_recipes"
                >Recipes</a></li>
                <li><a href="#" 
                data-role="button"
                data-icon="vs_video"
                >Videos</a></li>
                <li><a href="#photos" 
                data-role="button"
                data-icon="vs_photo"
                >Photos</a></li>
                <li><a href="#tweets" 
                data-role="button"
                data-icon="vs_twitter"
                >Tweets</a></li>
            </ul>
        </div><!-- navbar -->
    </div><!-- footer -->
</div><!-- page -->

<div id="videoplayer"
    data-role="page">
    <div data-role="header"
        data-position="fixed"
        data-theme="a">
        <a href="#videos"
            data-transition="fade"
            data-icon="back"
            data-iconpos="notext"
            data-direction="reverse"
            >Videos</a>
        <h1>Videos</h1>
    </div><!-- header -->
    <div data-role="content">
        <div id="myplayer"></div>
    </div><!-- content -->
</div><!-- page -->


<script src="http://gdata.youtube.com/feeds/users/jgswife/uploads?alt=json-in-script&max-results=30&callback=listVideos" type="text/javascript"></script>

播放视频的Javascript代码：

function listVideos(data) { 
var output ='';
for ( var i=0; i<data.feed.entry.length; i++) {

    var title = data.feed.entry[i].title.$t;
    var thumbnail = data.feed.entry[i].media$group.media$thumbnail[0].url;
    var description = data.feed.entry[0].media$group.media$description.$t;
    var id = data.feed.entry[0].id.$t.substring(38);

    var blocktype = ((i % 2)===1) ? 'b': 'a';

    output += '<div class="ui-block-' + blocktype + '">';

    output += '<a href="#videoplayer" data-transition="fade" onclick="playVideo(\'' +  id +'\',\'' + title + '\',\'' + escape(description) + '\')">';
    output += '<h3 class="movietitle">' + title + '</h3>';
    output += '<img src="' + thumbnail + '" alt="' + title + '" />';
    output +="</a>";
    output +="</div>";
}

$('#videolist').html(output);
}

function playVideo(id, title, description) {
var output ='<iframe src="http://www.youtube.com/embed/'+ id +'?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>';
output += '<h3>' + title + '</h3>';
output += '<p>' + unescape(description) + '</p>';
$('#myplayer').html(output);
}

按下网站中的后退按钮后，Youtube视频继续播放

0 个答案: