只是一些资源可以帮助我找到解决方案:)
- 功能齐全的 Chromeless 播放器,仅缺少与视频当前时间的 ui 滑块同步:http: //jsfiddle.net/GR7Z2/45/
- jquery UI 滑块文档http://jqueryui.com/demos/slider/#option-value
- tikku 无铬播放器插件文档http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3
我遇到的问题是将 jquery 滑块值设置为以秒为单位的当前时间,并与我尝试过的当前时间保持同步:
var seektime = $("#youtube-player-container").tubeplayer("data").currentTime;
$( "#slider" ).slider( "option", "value", seektime );
尽管我已经想出了如何使用滑块在视频中寻找时间,但 jquery 很长而且很乱所以我建议在 jsfiddle http://jsfiddle.net/GR7Z2/45/ 上查看它以获得更清晰的理解,但在这里有什么办法
$(".pause").hide();
$(".unmute").hide();
jQuery("#youtube-player-container").tubeplayer({
width: 600,
height: 450,
showControls: 0,
allowFullScreen: "true",
modestbranding: false,
initialVideo: "Y70rcfQEK7U",
preferredQuality: "default",
onPlay: function(id){$(".play").hide();},
onPause: function(){$(".pause").hide();$(".play").show();},
onStop: function(){$(".pause").hide();$(".play").show();},
onSeek: function(time){},
onMute: function(){$(".mute").hide();$(".unmute").show();},
onUnMute: function(){$(".unmute").hide();$(".mute").show();},
onPlayerUnstarted: function(){},
onPlayerPlaying: function(){$(".play").hide();$(".pause").show();},
onPlayerBuffering: function(){$(".pause").show();}
});
$(".play").click(function(){
$("#youtube-player-container").tubeplayer("play");
});
$(".pause").click(function(){
$("#youtube-player-container").tubeplayer("pause");
});
$(".stop").click(function(){
$("#youtube-player-container").tubeplayer("stop");
});
$(".mute").click(function(){
$("#youtube-player-container").tubeplayer("mute");
});
$(".unmute").click(function(){
$("#youtube-player-container").tubeplayer("unmute");
});
function getYouTubeInfo() {
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/Y70rcfQEK7U?v=2&alt=jsonc",
dataType: "json",
success: function (data) {parseresults(data)}
});
}
function parseresults(result) {
console.log(result);
var vidlength = result.data.duration;
$('#vidlength').html(vidlength);
$(function() {
$( "#slider" ).slider({ max: vidlength });
$( "#slider" ).bind( "slidechange", function(event, ui) {
var viseekto = $('#slider').slider('value');
jQuery("#youtube-player-container")
.tubeplayer("seek", viseekto);
});
var seektime = $("#youtube-player-container").tubeplayer("data").currentTime;
$( "#slider" ).slider( "option", "value", seektime );
});
}
$(document).ready(function () {
getYouTubeInfo();
});