Jplayer怎么在父页面嵌套一个 iframe将播放器放在 iframe 中,这样在切换页面时,播放器不会被销毁,保留播放状态。代码用JQuery来写
时间: 2024-02-15 22:05:03 浏览: 129
jPlayer基于jQuery的网页播放器
5星 · 资源好评率100%
在父页面嵌套一个 iframe,并将 Jplayer 播放器放在 iframe 中,可以使用以下步骤:
1. 在父页面中创建一个 iframe,设置其 src 属性为要嵌入的页面,如下所示:
```html
<iframe src="player.html"></iframe>
```
2. 在 player.html 页面中添加 Jplayer 播放器的相关代码,如下所示:
```html
<!-- Jplayer 播放器代码 -->
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<div class="jp-controls">
<button class="jp-play" onclick="play()">播放</button>
<button class="jp-pause" onclick="pause()">暂停</button>
</div>
</div>
<!-- JavaScript 代码 -->
<script>
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "music.mp3"
});
},
swfPath: "js",
supplied: "mp3",
wmode: "window"
});
});
function play() {
$("#jquery_jplayer_1").jPlayer("play");
}
function pause() {
$("#jquery_jplayer_1").jPlayer("pause");
}
</script>
```
3. 在父页面中使用 JavaScript 代码来控制 iframe 中的 Jplayer 播放器,如下所示:
```html
<!-- 父页面中的 JavaScript 代码 -->
<script>
var iframe = $("iframe")[0];
var iframeWindow = iframe.contentWindow;
var jplayer = iframeWindow.$("#jquery_jplayer_1");
function play() {
jplayer.jPlayer("play");
}
function pause() {
jplayer.jPlayer("pause");
}
</script>
```
通过上述步骤,我们就可以将 Jplayer 播放器放在 iframe 中,在切换页面时,播放器不会被销毁,保留播放状态。
阅读全文