8222人阅读
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：762424次
积分：8820
积分：8820
排名：第1025名
原创：145篇
转载：163篇
译文：21篇
评论：179条
(6)(8)(6)(1)(2)(8)(2)(5)(1)(1)(1)(1)(1)(1)(1)(1)(12)(3)(3)(2)(1)(1)(1)(4)(2)(19)(22)(12)(20)(1)(2)(1)(2)(3)(4)(2)(7)(3)(12)(13)(10)(11)(7)(20)(8)(11)(19)(29)(2)(3)(8)(1)(1)mac电脑用html5插件播放优酷视频1小时以上的都只能播放40分钟，貌似除了优酷自己产都其他都是，什么情况_百度知道
mac电脑用html5插件播放优酷视频1小时以上的都只能播放40分钟，貌似除了优酷自己产都其他都是，什么情况
html5插件 本放看优酷点1韩剧 能播放40钟左右1优酷自家产视频播完点部电影<img class="word-replace" src="/api/getdecpic?picenc=0ad0钟能播放40钟都打插件我情况啊～才能使用html5呢
我有更好的答案
搜索妈妈再怕我Macbook发热计划优酷html5插件工作稳定且广告惜间比较久chrome支持土豆奇艺家行另家能用优酷ok我直用
我也的也是这情况，解决了告诉我一声
其他类似问题
为您推荐：
html5的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁HTML5制作酷炫音频播放器插件图文教程
本期的教程主要是为了展示Html5新增的标签和audio元素的Dom API的使用，讲解的非常详细，并附上示例代码，有需要的小伙伴参考下
上图便是这个音频播放器的UI界面图，里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成，看上去有难度的地方就只有CD和打碟器的制作了，在歌曲播放时CD和打碟器都是具有动画交互效果的，这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~
因为这一期的教程主要是为了展示Html5新增的&audio&标签和audio元素的Dom API的使用，所以播放器UI的绘制在这里就不详细解释了，有疑问的可以自行查看案例的CSS文件的注释或者在下方留言。
主要功能：
一、播放、暂停、上一首、下一首、音量增减
二、点击CD可以打开和关闭播放列表
三、可以拖动本地音乐文件到播放器进行播放
Html结构代码如下:&div id="myAudio" style="margin:0"&
&source title="王若琳 - Wild World.mp3" src="&a href="/upload/_8200.mp3"&/upload/_8200.mp3&/a&" /&
&source title="韦礼安 - 还是会.mp3" src="&a href="http://stream18./.mp3"&http://stream18./.mp3&/a&" /&
&source title="王若琳 - Lost in paradise.mp3" src="&a href="http://stream12./.mp3"&http://stream12./.mp3&/a&" /&
&div class="music_info clearfix"&
&div class="cd_holder"&&span class="stick"&&/span&&div class="cd"&&/div&&/div&
&div class="meta_data"&
&span class="title"&&/span&
&div class="rating"&
&div class="starbar"&
&ul class="current-rating" data-score="85"&
&li class="star5"&&/li&
&li class="star4"&&/li&
&li class="star3"&&/li&
&li class="star2"&&/li&
&li class="star1"&&/li&
&div class="volume_control"&
&a class="decrease"&a&/a&
&span class="base_bar"&
&span class="progress_bar"&&/span&
&a class="slider"&&/a&
&a class="increase"&b&/a&
&ul class="music_list"&&/ul&
&div class="controls"&
&div class="play_controls"&
&a class="btn_previous"&e&/a&
&a class="btn_play"&c&/a&
&a class="btn_next"&d&/a&
&div class="time_line"&
&span class="passed_time"&0:00&/span&
&span class="base_bar"&
&span class="progress_bar"&&/span&
&span class="total_time"&0:00&/span&
&/div&&/div&
在上面的结构中我们可以发现这个html5新增的audio标签，它具有一个controls属性，顾名思义它是播放器的控制器，controls 属性规定浏览器为音频提供播放控件，例如在chrome浏览器下的audio标签中设置该属性，播放器就会以如下的形式出现，如果不设置该属性，则会是空白一片代码如下:&audio controls src="xxx.mp3"&&/audio&
但由于在不同浏览器下的对audio标签渲染效果不一，这种简易的方法并不适合在跨浏览器下的使用，并且浏览器默认的播放器控件所提供的功能实在是太少了。。所以我们一般通过不设置该属性的方法来隐藏浏览器的默认播放控件，并且手工加入额外的标签和样式来定制播放器的UI界面。
在播放器的UI界面绘制完成后，首先我们需要做的是为播放、上一首、下一首这三个主要的控制按钮添加对应的事件监听。
代码如下:var myAudio = $("#myAudio audio")[0];var $sourceList = $("#myAudio source");var currentSrcIndex = 0;var currentSr = "";
代码如下:$(".btn_play").click(function(){ if (myAudio.paused) {
myAudio.play(); } else {
myAudio.pause(); }});$(".btn_next").click(function(){ ++currentSrcIndex & $sourceList.length - 1 && (currentSrcIndex = 0); currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src"); myAudio.src = currentS myAudio.play();});$(".btn_previous").click(function(){ --currentSrcIndex & 0 && (currentSrcIndex = 0); currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src"); myAudio.src = currentS myAudio.play();});
上述的按钮点击的事件监听中，我们通过调用原始的audio元素的play()和pause()方法来控制音频的播放和暂停。另外audio元素提供了currentSrc属性，该属性表示当前播放文件的文件源，我们通过设置该属性来控制当前播放的歌曲曲目。
接下来我们来对音量条两边的两个小喇叭添加事件监听，使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量，我们可以调用audio元素中所提供的volume属性。volume值最大为1，最小为0，在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制，所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的，这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量，然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的（如下所示），只是稍作提醒。代码如下:$(".volume_control .decrease").click(function() { var volume = myAudio.volume - 0.1; volume & 0 && (volume = 0); myAudio.changeVolumeTo(volume);});$(".volume_control .increase").click(function() { var volume = myAudio.volume + 0.1; volume & 1 && (volume = 1); myAudio.changeVolumeTo(volume);});另外我们还需要实现使用滑动器或者点击音量条某一位置来调控音量的功能，有了上面的基础，这个就容易完成了。首先我们来看看点击音量条某一位置来调控音量的功能：点击音量条的某一位置，计算该由音量条的起点到该位置的长度值，再用该值除以总的音量条长度（在这里是100）得到百分比值，再用该百分比值乘以最大音量值1得到所要跳跃到的音量值，再赋值给volume。通过滑动器来调控音量的方法实现也与此类似，主要是要懂得如何计算滑动器在音量条的位置值。在此就不做详细解释，有问题可以下方留言。
代码如下:$(".volume_control .base_bar").mousedown(function(ev){ var posX = ev.clientX; var targetLeft = $(this).offset(). var volume = (posX - targetLeft)/100; volume & 1 && (volume = 1); volume & 0 && (volume = 0); myAudio.changeVolumeTo(volume);});$(".volume_control .slider").mousedown(starDrag = function(ev) { ev.preventDefault(); var origLeft = $(this).position().
/*滑块初始位置*/ var origX = ev.clientX; /*鼠标初始位置*/ var target = var progress_bar = $(".volume_control .progress_bar")[0]; $(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX;
/*计算鼠标移动的距离*/
var curLeft = origLeft + moveX; /*用鼠标移动的距离表示滑块的移动距离*/
(curLeft & -7) && (curLeft = -7);
(curLeft & 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100); }); $(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag); });});
好了，现在播放器已经基本能用了，但我们还希望能够直接跳过音频的一部分到特定的时间点。那么要怎么实现呢？？！制定标准的委员们也不是傻子，这种常用的功能是不会有所疏漏的拉~所以赶紧翻翻API吧，你会发现audio元素提供了一个名为currentTime的属性，非常简明易懂的名称（其实大多属性都是很好理解的），设置该属性可以设置当前播放的时间点。
在这里，我们还需要使用audio的另一个属性duration，该属性指的是当前播放文件的总时间长度。因此根据音量控制的实现，我们可以这样做：
一、点击进度条的某一位置，计算该由进度条的起点到该位置的长度占总进度条长度的百分比值（例如点击进度条的正中间位置，则进度条的起点到该位置的长度占总进度条长度的50%），记为percentage。
二、然后用percentage乘以文件的总时间长度duration就得到了你想要跳跃到的时间点的值，再把该值赋给currentTime即完成了所要实现的功能。代码如下:$(".time_line .base_bar").mousedown(function(ev){ var posX = ev.clientX; var targetLeft = $(this).offset(). var percentage = (posX - targetLeft)/140 * 100; myAudio.currentTime = myAudio.duration * percentage / 100;});到这里，播放器已经基本成型了。剩下一些无关痛痒（其实对我来说才是最重要的哈哈）的UI交互实现，如果大家有兴趣的话就到源码中查看吧，有问题可以在下方评论留言，希望能多多交流和学习。503: Service Unavailable
503: Service Unavailable
访问太频繁了，服务器要炸。赞助商广告
最后登录15-11-10在线时间345 小时赞2 注册时间14-5-21积分1065帖子精华0UID590975
( ☆☆☆ )
分享于 15-7-21 08:57:46
Chrome 41.0.
Mac OS X 10.10.4
linxyz 发表于 15-6-11 13:03
安装chrome，不需要插件就可以放flash
现在 Chrome 也犯病了，居然显示
Adobe Flash Player was blocked because it is out of date.
旁边有俩选项：Run this time, 和 Update plug-in
选 Update plug-in，永远不能成功。。。
最后登录15-11-7在线时间40 小时赞0 注册时间15-5-3积分121帖子精华0UID675944
分享于 15-7-25 12:05:46
Safari 8.0.7
Mac OS X 10.10.4
有个东西‘妈妈再也不用担心发热了’
最后登录15-11-7在线时间23 小时赞0 注册时间14-3-14积分55帖子精华0UID574089
分享于 15-7-25 14:14:57
Safari 8.0.7
Mac OS X 10.10.4
ClickToPluginForChina，这个东西试试，作者一直在更新