使用輸入「範圍」滑塊更改YouTube視頻的時間？

對於運行，我試圖用範圍滑塊更改視頻的時間 - 所以當您上下移動滑塊時，它會改變視頻的時間。我正在尋找與jQuery做到這一點。使用輸入「範圍」滑塊更改YouTube視頻的時間？

DEMO： http://codepen.io/mistkaes/pen/rVMPMj

- 和 -

CODE：

<iframe width="502" height="282" src="https://www.youtube.com/embed/x9B2FmRR9ds?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 

<br /> 

<input type="range" id="time-slider" value="0" style="width: 500px" />

一如往常，感謝幫助我！

來源

2015-05-23 mistkaes

這裏是有關筆：http://codepen.io/udnaan/pen/ZGpwKB

HTML：

<div id="player"></div> 
<br/> 
<input type="range" id="time-slider" value="0" style="width: 500px" />

JS：

var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'x9B2FmRR9ds', 
     events: { 
     'onReady': onPlayerReady, 
     } 
    }); 
    } 

    function onPlayerReady(event) { 
    event.target.playVideo(); 
    $('#time-slider').attr('max', player.getDuration()) 
    $('#time-slider').change(function(evt){ 
     console.log($(evt.currentTarget).val()); 
     player.seekTo($(evt.currentTarget).val()) 

    }) 
    }

而且看看YouTube的API：https://developers.google.com/youtube/iframe_api_reference#seekTo

來源

2015-05-23 01:34:57

使用輸入「範圍」滑塊更改YouTube視頻的時間？

回答

相關問題