javascript youtube like slider control(javascript youtube 喜欢滑块控件)
问题描述
我有一个关于在浏览器中实现滑块控件的问题.
I've a question about implementing a slider control in a browser.
我需要在浏览器中随着时间的推移回放数据.我将让一名 Worker 通过调用 REST api 来填充播放缓冲区.然后,UI 线程将消耗缓冲区并将数据播放给用户.
I need to playback data over time, in a browser. I will have one Worker filling the playback buffer by making calls to a REST api. The UI thread will then consume the buffer and playback the data to the user.
我想模拟 YouTube 进度 UI 控件.它在单个 UI 控件中向您显示您观看了多少,以及预取了多少.是否可以调整滑块控件来执行此操作?jQuery UI 范围滑块不是我想要的
I want to simulate YouTube progress UI control. It shows you in a single UI control how much you've watched, and how much has been prefetched. Is it possible to adapt a slider control to do this ? The jQuery UI range slider isn't quite what I want
我目前在我的网站中使用 jQuery,因此更喜欢基于该框架的解决方案.
I currently use jQuery in my website, so would prefer a solution based on that framework.
推荐答案
你可以使用自己的背景图片稍微修改一下jQuery UI滑块,然后调整宽度以显示加载进度(demo):
You could just modify the jQuery UI slider a bit by using your own background image, then adjusting the width to show the load progress (demo):
$(function(){
var ytplayer = $('#player')[0],
// # seconds from YouTube API
duration = ytplayer.getDuration(),
// # bytes
totalBytes = ytplayer.getVideoBytesTotal(),
// start # bytes - may not be necessary
startBytes = ytplayer.getVideoStartBytes();
$("#slider").slider({
range: "max",
min: startBytes,
max: duration,
value: 1
})
// image: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/images/ui-bg_highlight-soft_15_cc0000_1x100.png
// with a 30% opacity
.css('background-image', 'url(http://i56.tinypic.com/fbjad2.png)');
// Loop to update slider
function loop() {
var time = ytplayer.getCurrentTime(),
// make loaded a percentage
loaded = 100 - (ytplayer.getVideoBytesLoaded() / totalBytes) * 100;
// set limit - no one likes negative widths
if (loaded < 0) { loaded = 0; }
// update time on slider
$('#slider')
.slider('option', 'value', time)
.find('.ui-widget-header').css('width', loaded + '%');
// repeat loop as needed
if (loaded < 0 || time < duration) {
setTimeout(loop, 500);
}
}
loop();
});
这篇关于javascript youtube 喜欢滑块控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:javascript youtube 喜欢滑块控件


- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01