使用 Jplayer 做网页播放器
CreateTime 2019-04-30
UpdateTime 2022-05-31
下面是 Jplayer 音频播放器和视频播放器 标准的 Demo
音频播放器
Update Required
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
视频播放器
Update Required
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
具体实现
引入 js 和 css
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/jplayer@2.9.2/dist/skin/blue.monday/css/jplayer.blue.monday.min.css"> <script src="https://fastly.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script> <script src="https://fastly.jsdelivr.net/npm/jplayer@2.9.2/dist/jplayer/jquery.jplayer.min.js"></script>
音频播放器 HTML
<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-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-controls-holder"> <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-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-details"> <div class="jp-title" aria-label="title"> </div> </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>
音频播放器 Javascript
$(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "梁静茹 - 情歌", mp3: "http://other.web.ra01.sycdn.kuwo.cn/resource/n3/128/9/64/2690960309.mp3", }); }, cssSelectorAncestor: "#jp_container_1", swfPath: "/js", supplied: "mp3", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); });
视频播放器 HTML
<div id="jp_container_2" class="jp-video " role="application" aria-label="media player"> <div class="jp-type-single"> <div id="jquery_jplayer_2" class="jp-jplayer"></div> <div class="jp-gui"> <div class="jp-video-play"> <button class="jp-video-play-icon" role="button" tabindex="0">play</button> </div> <div class="jp-interface"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </div> <div class="jp-controls-holder"> <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-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-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> <button class="jp-full-screen" role="button" tabindex="0">full screen</button> </div> </div> </div> </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>
视频播放器 Javascript
$(document).ready(function () { $("#jquery_jplayer_2").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Big Buck Bunny Trailer", m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" }); }, cssSelectorAncestor: "#jp_container_2", swfPath: "/js", supplied: "m4v, ogv", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); });
本网站页面中的播放器
通过修改UI,使得播放器界面与网页中的主题契合,下面是相应的内容,由于 Jplayer 的样式与网页的有冲突,所以还是去下面的测试页面看吧
http://blog.ccyg.studio/article/9034ba44-2ccf-46f7-8951-3f8a32bf522c