Question

我遇到了尝试“使用jQuery插件来实现功能齐全的音频播放器，利用HTML5音频标签，以及不支持HTML5的浏览器的Flash后备”的问题。这是Tom Negrino和Dori Smith所着的“JavaScript Visual Quickstart Guide，Eighth Edition”一书的第420页。

涉及三个文件： script06.html script06.css script06.js

script06.css文件的第4行可能存在问题，即：src：local（'☺'），url（'mbPlayer / mbAudioFont / mb_audio_font.woff'）。我正在使用记事本。我的浏览器是IE9，我正在使用Vista。我不知道笑脸是如何进入代码的，如果它是正确的。这三个文件的编码是：

script06.css文件是：

  @font-face {         font-family:'mb_audio_fontRegular';         src:url('mbPlayer/mbAudioFont/mb_audio_font.eot');         src:local('☺'), url('mbPlayer/mbAudioFont/mb_audio_font.woff')         format('woff'),         url('mbPlayer/mbAudioFont/mb_audio_font.ttf')        format('truetype'),         url('mbPlayer/mbAudioFont/mb_audio_font-webfont_svg#webfontywr4YLri')         format('svg');         font-weight:normal;         font-style:normal; } .mbMiniPlayer span {         font:16px/20px "mb_audio_fontRegular","Webdings",sans-serif; } a.audio {         display:none; } .mbMiniPlayer table {         -moz-border-radius:5px;         -webkit-border-radius:8px;         border-radius:5px;         margin:5px; } .mbMiniPlayer.shadow table {         border:1px solid white;         -moz-box-shadow:#ccc 0px 0px 5px;         -webkit-box-shadow:#ccc 0px 0px 5px;         box-shadow:#ccc 0px 0px 5px; } .mbMiniPlayer.black td {         margin:0;         padding:0; } .jp-progress {         position:relative;         background-color:#fff;         height:8px;         margin:2px;         margin-top:0;         top:-2px;         -moz-box-sizing:         border-box;         cursor:pointer; } .jp-load-bar {         background-color:#e9e6e6;         height:6px;         -moz-box-sizing:         border-box; } .jp-play-bar {         background-color:black;         background-image:         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7D7D7D), to(#262626), color-stop(.6,#333));         height:6px;         -moz-box-sizing:border-box; } .mbMiniPlayer td.controlsBar {         background-color:#ccc;         background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEDEDE), to(#FFF), color-stop(.6,#FFF));         margin:0;         padding:0;         cursor:default !important;         box-shadow:inset 1px 1px 2px #999;         -moz-box-shadow:inset 1px 1px 3px #999;         -webkit-box-shadow:inset 1px 1px 2px #999; } .mbMiniPlayer .controls {         margin:1px;         display:none;         width:1px;         border:1px solid gray;         height:100%;         -moz-box-sizing:border-box;         overflow:hidden;         white-space:nowrap; } .mbMiniPlayer span {         display:inline-block;         padding:3px;         width:20px;         height:20px;         color:white;         text-align:center;         text-shadow:1px -1px 1px #000;         background-image:-webkit-gradient(linear, 0% 5%, 85% 100%, from(transparent), to(rgba(100, 100, 100,0.5))); } .mbMiniPlayer span.title {         position:relative;         color:#333;         font:10px/12px sans-serif;         text-shadow:none !important;         letter-spacing:1px;         width:100%;         height:8px;         top:-4px;         background:transparent !important;         text-align:left;         cursor:default !important; } .mbMiniPlayer span.rew {         width:1px;         cursor:pointer; } .mbMiniPlayer span.volumeLevel a {         position:relative;         display:inline-block;         margin:0;         margin-right:2px;         width:2px;         padding:0;         background-color:white;         height:0;         vertical-align:bottom;         opacity:.1;         cursor:pointer; } .mbMiniPlayer span.volumeLevel a.sel {         -moz-box-shadow:#000 0px 0px 1px;         -webkit-box-shadow:#000 0px 0px 1px;         box-shadow: #000 0px 0px 1px; } .mbMiniPlayer span.time {         width:1px;         font:11px/20px sans-serif;         overflow:hidden;         white-space:nowrap;         cursor:default !important;         text-shadow:0 0 2px #999!important; } .mbMiniPlayer span.play {         -moz-border-radius:0 5px 5px 0;         -webkit-border-top-right-radius:5px;         -webkit-border-bottom-right-radius:5px;         border-radius:0 5px 5px 0;         cursor:pointer; } .mbMiniPlayer span.volume {         -moz-border-radius:5px 0 0 5px;         -webkit-border-top-left-radius:5px;         -webkit-border-bottom-left-radius:5px;         border-radius:5px 0 0 5px;         cursor:pointer; } .mbMiniPlayer.black span {         background-color:#666;         text-shadow:1px -1px 1px #000; } .mbMiniPlayer.black span.play {         border-left:1px solid #333; } .mbMiniPlayer.black span.volume {         border-right:1px solid #999; } .mbMiniPlayer.black span.volume.mute {         color:#999; }

script06.html文件的编码是：

<!DOCTYPE html><html>
<head>
<title>Audio player</title>
<link rel="stylesheet" href="script06.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="mbPlayer/jquery.mb.miniPlayer.js"></script>
<script src="mbPlayer/jquery.jplayer.min.js"></script>
<script src="script06.js"></script>
</head>
<body>
<h2>jQuery HTML5 audio player</h2>
<div>
    <a class="audio {ogg:'mbPlayer/Rhapsody_in_Blue.ogg'}" href="mbPlayer/Rhapsody_in_Blue.mp3">Rhapsody in Blue</a>
</div>
</body>
</html>

script06.js文件的代码是：

$(function () {
    $(".audio").mb_miniPlayer({
        width: 360,
        inLine: false,
        showRew: true,
        showTime: true
    });
});

我很感激帮助!!!

Answer 1

不要浪费你的时间，有很多很好的免费插件可以帮到你。试试video.js

Answer 2

如果你可以找出笑脸字符，你可以使用它的ANSI代码来绕过css第4行的错误。

jQuery HTML5音频播放器插件难度

2 个答案: