与jQuery UI的滑块TubePlayer插件视频当前时间同步
问题描述:
只是一些资源,帮助帮我想想办法:)与jQuery UI的滑块TubePlayer插件视频当前时间同步
- 缺乏与视频当前时间只有UI滑块同步全功能的控件播放器:http://jsfiddle.net/GR7Z2/45/
- jQuery UI的滑块文档http://jqueryui.com/demos/slider/#option-value
- tikku chromless播放器的插件文件http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3
ŧ
var seektime = $("#youtube-player-container").tubeplayer("data").currentTime;
$("#slider").slider("option", "value", seektime);
虽然我已经想通了如何寻求一个时间:我有与当前时间 我已经尝试设置jQuery的滑块值到当前的时间(秒),并保持同步,他的问题在使用滑块视频 的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();
});
答
进出口寻找在完全相同的解决方案,当你建造这里。
谢谢你的滑块功能!
我已经这样完成了剧本:
$("#slider").slider({
max: $("#video").tubeplayer("data").duration,
stop: function(event, ui) {
var viseekto = $('#slider').slider('value');
jQuery("#video").tubeplayer("seek", viseekto);
},
});
window.setInterval(function() {
var seektime = $("#video").tubeplayer("data").currentTime;
$("#slider").slider("option", "value", seektime);
}, 1000);
希望它能帮助!
http://jsfiddle.net/GR7Z2/70/不起作用:/ – Fiddler 2012-01-22 00:31:09
感谢!你帮了我$(“#video”)。tubeplayer(“data”)。currentTime;大! – 2015-12-29 14:52:05