gpt4 book ai didi

jquery - jQuery HTML5音频播放器插件难度

转载 作者:行者123 更新时间:2023-12-03 02:23:59 24 4
gpt4 key购买 nike

我在尝试“使用jQuery插件来实现利用HTML5音频标签的功能齐全的音频播放器,并为不支持HTML5的浏览器提供Flash后备功能”时遇到问题。这是Tom Negrino和Dori Smith撰写的“JavaScript视觉快速入门指南,第八版”的第420页。

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

script06.css文件的第四行可能存在问题,即: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
});
});

我将不胜感激!!!

最佳答案

不要浪费您的时间,有很多不错的免费插件可以帮助您。试试video.js

关于jquery - jQuery HTML5音频播放器插件难度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7781587/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com