HTML5音頻播放，歌詞同步，及視頻播放功能（JPlayer、JWPlayer、VideoJS）
阿新 • • 發佈：2017-05-31
cover swf ddl iis enter [0 fast absolute idt
近期項目中用到音頻視頻播放。所以就寫了一個demo：
這個是JPlayer插件的視頻播放：
這個是音頻播放，歌詞同步：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!--註意：在IIS上配置的時候，需加入mime映射，否則歌詞出不來。在IIS列表中找到“MIME類型”。進行加入.lrc類型;.mp4類型文件-->
<head>
<meta charset="utf-8" content=""/>
<title></title>
<!--JPlayer的引用文件-->
<script src="JPlayer/jquery.min.js" type="text/javascript"></script>
<script src="JPlayer/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="JPlayer/lrc.js" type="text/javascript"></script>
<link href="Css/style.css" rel="stylesheet" type="text/css" />
<script src="Layer/layer.js" type="text/javascript"></script>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4"/>
<meta name="MobileOptimized" content="240"/>
<!--VideoJS的引用文件-->
<link href="VideoJS/video-js.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="VideoJS/video.js"></script>
<script>
videojs.options.flash.swf = "VideoJS/video-js.swf";
</script>
<!--jwplayer的引用文件-->
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline:none;
}
ul, ol, dl {
list-style: none;
}
.content {width: 402px;height:200px;overflow:hidden;padding:50px;}
#lrc_list{margin:10px auto;color:white;}
#lrc_list li{font:normal 14px/2.1 ‘microsoft yahei‘;text-align:center;}
#lrc_list li.hover {color: green;font-weight:bold;}
</style>
<script type="text/javascript">
var songId = 0; //歌曲序號
var song = ‘video.mp4‘; //歌曲名
var lrc = ‘/Lrc/火燒的寂寞.lrc‘; //歌詞
var isPlay = false; //是否正在播放
var time = ""; //歌詞返回時間
var htmlobj; //歌詞html
var currentPro; //當前進度
//歌曲綁定
var songList = new Array();
songList.push("/Audio/video.mp4");
songList.push("/Audio/火燒的寂寞.mp3");
songList.push("/Audio/走在冷風中-劉思涵.mp3");
songList.push("/Audio/父親.mp3");
songList.push("/Audio/匆匆那年.mp3");
$(document).ready(function () {
//播放器初始化
$(‘#jp_sound‘).jPlayer({
ready: function () {
$(this).jPlayer(‘setMedia‘, { title: song, m4v: songList[0], poster: ‘/Image/1.jpg‘ });
},
supplied: ‘ m4v,mp3‘,
swfPath: ‘/JPlayer/‘,
wmode: ‘window‘,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
solution: ‘flash, html‘,
preload: ‘auto‘,
size: {
width: "550px",
height: "360px"
//cssClass: ".blur" //定義播放窗的背景樣式
},
ended: function () {//結束事件
if (document.getElementById(‘CircleAudio‘).checked) {
$(‘#jp_sound‘).jPlayer(‘play‘);
$("#lrc_list").removeAttr("style").html("<li>歌曲播放完成...</li>");
//點擊開始方法調用lrc。start歌詞方法 返回時間time
$.lrc.start($(‘#lrc_content‘).val(), function () {
return time;
});
}
else {
NextSong();
}
},
volume: 0.5,
timeupdate: function (event) {//時間更改事件
time = event.jPlayer.status.currentTime;
$("#time").html(" " + $.jPlayer.convertTime(event.jPlayer.status.currentTime) + "/" + $.jPlayer.convertTime(event.jPlayer.status.duration));
$("#currentProgress").css("width", event.jPlayer.status.currentPercentRelative + "%");
currentPro = event.jPlayer.status.currentPercentRelative;
}
});
})
//播放
function Play() {
isPlay = true;
$(‘#jp_sound‘).jPlayer(‘play‘);
$("#playSong").text("正在播出：" + song);
// if (lrc != "")
// ChangeLrc(lrc);
// //點擊開始方法調用lrc。start歌詞方法 返回時間time
// $.lrc.start($(‘#lrc_content‘).val(), function () {
// return time;
// });
}
//停止
function Stop() {
isPlay = false;
$(‘#jp_sound‘).jPlayer(‘stop‘);
$("#time").html(" 00:00/00:00");
$("#playSong").text("");
$("#lrc_list").hide();
//$("#jp_sound").jPlayer("destroy");//銷毀實例
}
//暫停
function Pause() {
$(‘#jp_sound‘).jPlayer(‘pause‘);
}
//靜音
function StopAudio() {
$(‘#jp_sound‘).jPlayer(‘mute‘);
}
//恢復音量
function RecoverAudio() {
$(‘#jp_sound‘).jPlayer(‘unmute‘);
}
//選擇某個進度播放
function SetProgress(event) {
if (isPlay == true) {
var precent = event.clientX / 551;
$("#jp_sound").jPlayer("playHead", precent * 100);
$(‘#jp_sound‘).jPlayer(‘play‘);
}
}
//是否循環播放
function CircleAudio() {
if (document.getElementById(‘CircleAudio‘).checked) {
if (isPlay == true)
$(‘#jp_sound‘).jPlayer(‘play‘);
}
}
//上一首
function PreSong() {
if (isPlay == true) {
songId--;
if (songId < 0) {
songId = songList.length - 1;
}
PlaySong(songId);
}
}
//下一首
function NextSong() {
if (isPlay == true) {
songId++;
if (songId >= songList.length) {
songId = 0;
}
PlaySong(songId);
}
}
//快進
function FastForward() {
if (isPlay == true) {
var pogress = currentPro + 3;
if (pogress >= 100)
NextSong();
$("#jp_sound").jPlayer("playHead", pogress);
$(‘#jp_sound‘).jPlayer(‘play‘);
}
}
//後退
function BackAway() {
if (isPlay == true) {
var pogress = currentPro - 3;
if (pogress <= 0)
PreSong();
$("#jp_sound").jPlayer("playHead", pogress);
$(‘#jp_sound‘).jPlayer(‘play‘);
}
}
//播放某一首歌曲
function PlaySong(id) {
var songAddr;
var img;
var format;
switch (id) {
case 0:
song = ‘video.mp4‘;
songAddr = songList[0];
img = ‘/Image/1.jpg‘;
lrc = "";
format = "mp4";
break;
case 1:
song = ‘火燒的寂寞.mp3‘;
songAddr = songList[1];
img = ‘/Image/2.jpg‘;
lrc = ‘/Lrc/火燒的寂寞.lrc‘;
format = "mp3";
break;
case 2:
song = ‘走在冷風中-劉思涵.mp3‘;
songAddr = songList[2];
img = ‘/Image/3.jpg‘;
lrc = ‘/Lrc/走在冷風中.lrc‘;
format = "mp3";
break;
case 3:
song = ‘父親.mp3‘;
songAddr = songList[3];
img = ‘/Image/4.jpg‘;
lrc = ‘/Lrc/父親.lrc‘;
format = "mp3";
break;
case 4:
song = ‘匆匆那年.mp3‘;
songAddr = songList[4];
img = ‘/Image/5.jpg‘;
lrc = ‘/Lrc/匆匆那年.lrc‘;
format = "mp3";
break;
default:
break;
}
if (lrc != "")
ChangeLrc(lrc);
//點擊開始方法調用lrc。start歌詞方法 返回時間time
$.lrc.start($(‘#lrc_content‘).val(), function () {
return time;
});
SetPlayer(format, song, songAddr, img);
Play();
}
//設置Media
function SetPlayer(format, song, songAddr, img) {
$(‘#jp_sound‘).jPlayer("clearMedia");
if (format == "mp3")
$(‘#jp_sound‘).jPlayer(‘setMedia‘, { title: song, mp3: songAddr, poster: img });
else if (format == "mp4") {
$(‘#jp_sound‘).jPlayer(‘setMedia‘, { title: song, m4v: songAddr, poster: img });
$(‘#lrc_list‘).hide();
}
}
//氣泡顯示title
function ShowTip(id) {
layer.tips($("#" + id).text(), ‘#‘ + id, { tips: 3, time: 1500 });
}
//更換歌詞
function ChangeLrc(lrc) {
if (lrc != "") {
var text = Ajax(lrc);
if (text == "0")
alert("獲取歌詞失敗！");
else {
$(‘#lrc_content‘).html(text);
}
}
}
function Ajax(url, fnSucc, fnFaild) {
//1.創建ajax對象
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
var oAjax = new XMLHttpRequest();
}
else {// code for IE6, IE5
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.鏈接server（打開server的連接）
//open(方法。文件名稱，異步傳輸)
oAjax.open(‘GET‘, url, false);
//3.發送
oAjax.send();
//4.接收返回
if (oAjax.readyState == 4) {
if (oAjax.status == 404)
return "0";
else
return oAjax.responseText;
}
else {
return "0";
}
}
</script>
</head>
<body>
<code style="color:green; font-size: x-large; font-weight: bold;">JPlayer插件：</code>
<!-- 兼容IE全部版本號，及谷歌，火狐等瀏覽器-->
<div style="height:360px;width:550px;position:absolute; vertical-align: middle; text-align: center;">
<div class="content">
<ul id="lrc_list">
<li></li>
</ul>
</div>
<textarea id="lrc_content" name="textfield" cols="50" rows="10" style="display:none;">
</textarea>
</div>
<div id="jp_sound" style=""></div>
<div>
<div class="jp-Progress">
<div class="progress" id="widthPro" onmousedown="SetProgress(event)" style="width: 100%;background-color: #F9F6B6;background-image: url(‘/Image/2.jpg‘)">
<div class="progress-bar" style="width: 0%; height: 15px;"
id="currentProgress"></div>
</div>
</div>
<div style="margin-top:2px;width:800px;">
<label id="time" style="font-family: 微軟雅黑; font-weight: bold;margin-left:-545px; font-size: 15px; "> 00:00/00:00</label>
<label id="playSong" style="font-family: 微軟雅黑; font-weight: bold;margin-left:0px; font-size: 15px; "></label>
</div>
<br/>
<button id="Play" class="myButton" onclick="Play()" onmouseover="ShowTip(‘Play‘)">播放</button>
<button id="Pause" class="myButton" onclick="Pause()" onmouseover="ShowTip(‘Pause‘)">暫停</button>
<button id="Stop" class="myButton" onclick="Stop()" onmouseover="ShowTip(‘Stop‘)">停止</button>
<button id="StopAudio" class="myButton" onclick="StopAudio()" onmouseover="ShowTip(‘StopAudio‘)">靜音</button>
<button id="RecoverAudio" class="myButton" onclick="RecoverAudio()" onmouseover="ShowTip(‘RecoverAudio‘)">恢復音量</button>
<button id="PreSong" class="myButton" onclick="PreSong()" onmouseover="ShowTip(‘PreSong‘)">上一首</button>
<button id="NextSong" class="myButton" onclick="NextSong()" onmouseover="ShowTip(‘NextSong‘)">下一首</button>
<button id="FastForward" class="myButton" onclick="FastForward()" onmouseover="ShowTip(‘FastForward‘)">快進</button>
<button id="BackAway" class="myButton" onclick="BackAway()" onmouseover="ShowTip(‘BackAway‘)">後退</button>
<input id="CircleAudio" type="checkbox" onclick="CircleAudio()"/>單曲循環
</div>
<br/>
<div>
<code style="color:green; font-size: x-large; font-weight: bold;">VideoJS插件：</code>
<!-- 支持IE9以上。及谷歌，火狐等瀏覽器-->
<!-- VideoJS具體操作：http://www.cnblogs.com/afrog/p/4115377.html -->
<video width="550px" height="360px" id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="550px" height="360px"
poster="/Image/5.jpg"
data-setup=‘{"example_option":true}‘>
<source src="/Audio/video.mp4" type=‘video/mp4‘ />
<!-- <source src="/Audio/video.ogv" type=‘video/ogg‘ />
<source src="/Audio/video.webm" type=‘video/webm‘ /> -->
</video>
</div>
<br />
<code style="color:green; font-size: x-large; font-weight: bold;">jwplayer插件：</code>
<!-- 兼容IE全部版本號，及谷歌。火狐等瀏覽器-->
<!--jwplayer使用方法-->
<div id="container"></div>
<!-- <script type="text/javascript">
jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf",
file: "/Audio/video.mp4",
image: "/Image/5.jpg",
height: 360,
width: 550
// events: {
// onReady: function () { this.play(); }
// }
});
</script>-->
<!--或者高速嵌入使用方法:-->
<video class="jwplayer" src="/Audio/video.mp4"poster="/Image/5.jpg" width="550px" height="360px" ></video>
</body>
</html>
完整代碼。去我的CSDN裏面下載：
HTML5音頻視頻代碼
HTML5音頻播放，歌詞同步，及視頻播放功能（JPlayer、JWPlayer、VideoJS）