【发布时间】:2018-05-26 10:01:34
【问题描述】:
我被困在一段 JavaScript 代码上,该代码在 Youtube API 上应用了一个事件。目标是当您点击相应的按钮时,视频将向后移动 5 秒、10 秒或 30 秒或前进 5 秒、10 秒或 30 秒。
我的问题是我有六个相似但时间值不同的函数。 (在这个例子中,我只放了两个函数:rewind5() 备份 5 秒,rewind10() 备份 10 秒)。
我正在寻找可以帮助我将这两个功能(rewind5() 和 rewind10())组合成一个功能的慈善灵魂。一旦我有了正确的结构,我就可以使用单个函数创建其他四个函数。
我的 JS 文件:
// Rewind 5s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s5back').prop('disabled', false);
$( '#s5back' ).click(function() {
rewind5();
});
} else {
$('#s5back').prop('disabled', true);
}
}
function rewind5() {
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 5, true);
player.playVideo();
};
// Rewind 10s
function onPlayerReady(event){
if(player.getPlayerState()===1 || player.getPlayerState()===2){
$('#s10back').prop('disabled', false);
$( '#s10back' ).click(function() {
rewind10();
});
} else {
$('#s10back').prop('disabled', true);
}
}
function rewind10(){
var currentTime = player.getCurrentTime();
player.seekTo(currentTime - 10, true);
player.playVideo();
};
我的 HTML 文件:
<div id="video-placeholder"></div>
<script type="text/javascript">
var player,
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: '100%',
height: '625px',
videoId: 'ID URL YOUTUBE',
playerVars: {
color: 'white',
controls: 0,
rel: 0,
showinfo: 0
},
events: {
onReady: initialize,
onStateChange: onPlayerReady
}
});
}
</script>
【问题讨论】:
标签: javascript api youtube