jplayer插件的api_如何使用jPlayer插件（jQuery）在您的网站上添加音频和视频

jplayer插件的api

jPlayer video player. Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin jPlayer is pretty good: it allows play media files, pause, change volume, it even have all necessary controls (which you can see in any media player). Also it allow us to change all its styles (all styles of interface loceted in single css file). More, it support HTML5 and able to work quite in all possible browsers. Here are supported formats of media files: mp3, ogg, m4a, m4v, ogv, wav etc. So, lets start to create our own players?

jPlayer视频播放器。 今天，我们继续jQuery课程，并将讨论向我们的网站添加音频或视频文件的可自定义播放器。 这个新的插件jPlayer非常好：它允许播放媒体文件，暂停，更改音量，甚至还具有所有必要的控件(您可以在任何媒体播放器中看到)。 它还允许我们更改其所有样式(位于单个css文件中的所有界面样式)。 此外，它支持HTML5，并且能够在所有可能的浏览器中正常工作。 以下是媒体文件支持的格式：mp3，ogg，m4a，m4v，ogv，wav等。那么，让我们开始创建自己的播放器吗？

Here are sample and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code with all samples.

这是我们所有示例的主页代码。

index.html (index.html)

<link rel="stylesheet" href="css/jplayer.blue.monday.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
    <div>
        <div class="players">
            <h2>Audio player</h2>
            <div class="jp-audio">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                    <div id="jp_interface_1" class="jp-interface">
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>