jquery.jplayer
时间: 2024-05-26 18:17:48 浏览: 16
jQuery.jPlayer是一个使用jQuery库的免费开源HTML5音频和视频播放器插件。它支持多种音频和视频格式,包括MP3,M4A,FLAC,OGG,AAC和WebM等,并且可以在所有主要的Web浏览器和移动设备上运行。jQuery.jPlayer具有可自定义的外观和感觉,允许您控制播放器的各个方面,如播放和暂停按钮,音量控制,进度条等。它还具有丰富的API,使您可以通过JavaScript代码控制播放器的行为。
相关问题
jplayer使用方法
jPlayer是一个基于HTML5的音频和视频播放器库。它是一个开源的JavaScript库,可以轻松地嵌入到网站中,用于播放音频和视频文件。以下是jPlayer的使用方法:
1. 引入jPlayer库文件
```html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
</head>
```
2. 创建播放器容器
```html
<div id="jquery_jplayer"></div>
```
3. 初始化jPlayer
```javascript
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3: "path/to/mp3/file.mp3",
m4a: "path/to/m4a/file.m4a",
oga: "path/to/ogg/file.ogg",
wav: "path/to/wav/file.wav"
});
},
swfPath: "path/to/jplayer.swf",
supplied: "mp3, m4a, oga, wav",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
```
其中,setMedia()方法用于设置要播放的媒体文件路径,supplied属性用于指定支持的文件格式,swfPath属性用于指定jPlayer.swf文件的路径。通过jPlayer的配置,可以实现很多自定义的功能,比如进度条、音量控制、全屏等等。
以上就是jPlayer的基本使用方法。需要注意的是,jPlayer需要在HTTP服务器上才能正常工作,不能直接在本地文件中打开。
Jplayer怎么在父页面嵌套一个 iframe将播放器放在 iframe 中,这样在切换页面时,播放器不会被销毁,保留播放状态。代码用JQuery来写
在父页面嵌套一个 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 中,在切换页面时,播放器不会被销毁,保留播放状态。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)