使用bootstrap 3音频播放器,但它显示正常的html5输出

时间:2016-08-11 07:41:01

标签: php html5 codeigniter audio twitter-bootstrap-3

我正在使用Bootstrap 3播放器输出音频播放器,但页面显示正常的黑色html5音频播放器输出。

这是我的目录结构:

miuse/application  
miuse/bootstrap
miuse/bootstrap/css  
miuse/bootstrap/js  
miuse/bootstrap3_player-master  
miuse/bootstrap3_player-master/css  
miuse/bootstrap3_player-master/js
miuse/music  

这是我的View代码(使用代码点火器):

<!DOCTYPE html>
<html lang="en">
<head>
<title>
try
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://localhost/miuse/bootstrap/js/jquery-3.1.0.min.js"></script>
<script src="http://localhost/miuse/bootstrap/js/bootstrap.min.js"></script>    
<script src="http://localhost/miuse/bootstrap3_player-master/js/bootstrap3_player.js"></script>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/miuse/bootstrap3_player-master/css/bootstrap3_player.css">
</head>
<body>
<div class=row>
<audio controls>
<source src="http://localhost/miuse/music/eyeofthetiger.mp3" type="audio/mpeg" /> 
</audio>
</div>
</body>
</html>   

1 个答案:

答案 0 :(得分:0)

剪切:

<script src="http://localhost/miuse/bootstrap3_player-master/js/bootstrap3_player.js"></script>

并将其粘贴到body标签中。

<!DOCTYPE html>
<html lang="en">
<head>
<title>
try
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://localhost/miuse/bootstrap/js/jquery-3.1.0.min.js"></script>
<script src="http://localhost/miuse/bootstrap/js/bootstrap.min.js"></script>    
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/miuse/bootstrap3_player-master/css/bootstrap3_player.css">
</head>
<body>
<div class=row>
<audio controls>
<source src="http://localhost/miuse/music/eyeofthetiger.mp3" type="audio/mpeg" /> 
</audio>
</div>
<script src="http://localhost/miuse/bootstrap3_player-master/js/bootstrap3_player.js"></script>
</body>
</html>