網頁音視訊播放器jPlayer使用介紹
阿新 • • 發佈:2019-02-03
最近專案中需要播放音訊.
視訊之前的已經做了, 要加上播放音訊的功能, 還要相容ie8, 還要禁止下載.
禁止下載這個就不管了, 因為不可能禁止.
要相容ie8, 就不能用<audio>
了, ie系列ie9+才支援audio
, 具體相容性請看: https://caniuse.com/#search=audio.
找了半天, 發現jPlayer相容ie系列, 就用它了.
其實也看了下, MediaElement.js音訊/視訊都支援, 不過它不支援ie8, 無奈放棄了.
如果不考慮ie8, 可以考慮MediaElement.js, 官網的例子還支援移動端樣式, 感覺不錯.
關於jPlayer
如果有更多的需要, 請檢視相應的開發手冊.
下面是具體程式碼:
<?php
/*
需要傳入$_p_audioUrl作為播放地址
**此外掛需要jquery在其之前載入**
*/
?>
<?php
// jplayer外掛根目錄
$_p_jplayerRootPath = 'http://yourdomain/path/to/jplayer';
?>
{if $_p_audioUrl}
<link href="{$_p_jplayerRootPath}/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$_p_jplayerRootPath}/jplayer/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<!-- <div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div> -->
</div>
</div>
<div class="jp-no-solution">
<span>提示</span>
您需要升級瀏覽器或者安裝<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash外掛</a>來播放這段音訊
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var stream = {
mp3: "{$_p_audioUrl}"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "{$_p_jplayerRootPath}/jplayer",
supplied: "mp3",
preload: "none",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
keyEnabled: true
});
});
//]]>
</script>
{/if}
實際引用(假定上面的模板叫tpl_audio_player.html
):
<?php
$_p_audioUrl = 'http://yourdomain/path/to/xxx.mp3'
include '/path/to/tpl_audio_player.html';
?>
實際效果截圖如下(ui調整過):
歡迎補充指正!