Bytes -----------------------------------------------------------------------------------------------------------------
「 Jplayer as audio player 」
You can easily customize the appearance and make it suitable for the color and style of your page.
If HTML can be used in the demo, the HTML solution will be used; otherwise, the flash solution will be used.
Note: The {wmode: "window"} option is used to ensure that flash can be played in firefox3.6. However, the OGA format will be used in the HTML solution.
References:
All demos are in: http://jplayer.org/latest/demos/
Support and FAQ for jplayer: http://jplayer.org/support/
Developer guide: http://jplayer.org/latest/developer-guide/
Start: http://jplayer.org/latest/quick-start-guide/
<!-- 头部 @黑眼诗人 <www.chenwei.ws> -->
<link style="text/css" rel="stylesheet" href=""> <!-- 引入你自定义的CSS皮肤 --> <script src="statics/home/js/jquery.min.js"></script> <!-- jPlayer基于jQuery，所以必须先插件之前引入 --> <script src="statics/home/js/player/jquery.jplayer.min.js"></script> <!-- 引入jPlayer插件 --> <script> $(document).ready(function(){ //jQuery方法：文档载入后执行 $("#jquery_jplayer_1").jPlayer({ //id为jquery_jplayer_1的div调用.jPlayer("options",{key:value})进行设置 ready: function () { //ready为键，对应function为值 $(this).jPlayer("setMedia", { //$(this)即为$("#jquery_jplayer_1"),setMedia即为选项，键为mp3(格式)，值为地址 m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
mp3: "./test.mp3" }); }, swfPath: "statics/home/js", //jPlayer.swf所在目录的路径 supplied: "mp3, m4a, oga" //支持的音频格式 }).jPlayer("play"); //.jPlayer("play")实现自动播放,可不加 }); </script>
<!-- 播放器主体(样式可在头部CSS中自定义) -->
<body> <div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>My jPlayer</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div></body>
For more detailed player parameters, see the documentation: http://jplayer.org/latest/developer-guide/
The above code is introduced on the page, and the path in the head can be played correctly. If you are interested, try it. Please feel free to contact me.
[Jplayer] one-minute jplayer deployment
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
