-5

我正在使用 jQuery Mobile + MediaElement.JS（MP3 jQuery 插件）

MP3 播放器工作正常。但是当我单击菜单链接时，该页面不会导航到其他页面。我只能看到加载图标。

$('video,audio').mediaelementplayer();

以上是调用 MP3 播放器的函数。我把它放在</body>. 当我删除上述脚本时，我可以导航到其他页面，但 MP3 播放器不起作用。

这是我得到的错误：

TypeError: $ is not a function $('video,audio').mediaelementplayer();

当我放在jquery.js头上，在任何图书馆之前，我得到了这个：

错误信息

最后，如果我改变对播放器的调用，jQuery('video,audio').mediaelementplayer()我会得到：

错误信息

4

1 回答 1

2

过去，我已经成功地将 jqm（单页应用程序）与 mediaelement.js 一起使用。我使用它的方式是通过调用

var mediaPlayer = new MediaElementPlayer(videoSelector);
mediaPlayer.play();

请看一个可能对您有帮助的工作示例，

http://jsfiddle.net/JXdNd/ （由于cdn跨域问题，视频无法播放，但在您自己的域中应该可以正常播放）

HTML

<div id="home" data-role="page">
    <div data-role="header">
         <h1>home</h1>

    </div> <a href="#page1" data-role="button">page1</a>

</div>
<div id="page1" data-role="page" data-theme="c">
    <div data-role="header">
         <h1>page1</h1>

    </div>
    <div data-role="content">
        <video width="200px" height="200px" id="video-player" class="video-player" controls="control" preload="none"><source type="video/youtube" src="https://www.youtube.com/watch?v=0bzu2pcyvE0"></video>
        <br/>
        <br/>
        <p style='width:200px'>Think Geek</p> 
            <a href="#page2" data-role="button">page2</a>
 <a href="#home" data-role="button" data-direction="reverse" data-icon="back">back</a>
    </div>
</div>
<div id="page2" data-role="page" data-theme="c">
    <div data-role="header">
         <h1>page2</h1>
 <a href="#page1" data-role="button" data-direction="reverse" data-icon="back">back</a>

    </div>
    <div data-role="content"></div>
</div>

JS

/*$(document).ready(function(){*/
$(document).on("pagecreate", function (e, data) {
    var videoSelector = '#'+$(e.target).attr("id")+' .video-player';
    if ($(videoSelector).length>0) {
        var mediaPlayer = new MediaElementPlayer(videoSelector);
        mediaPlayer.play();
    }
});
于 2013-10-30T12:44:07.343 回答