<span class="tag"><span</span> <span class="atn">onmouseover</span><span class="pun">=</span><span class="atv">"</span><span class="pln">highlight</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span><span class="atv">"</span> <span class="atn">onmouseout</span><span class="pun">=</span><span class="atv">"</span><span class="pln">unhighlight</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">)</span><span class="atv">"</span><span class="tag">><h2></span><span class="pln">What's New</span><span class="tag"></h2></span></span>
jQuery on ‘double click’ event (dblclick for mobile)
I ended up building a custom double click function that will work on both mobile and desktop:
<span class="kwd">var</span><span class="pln"> touchtime </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".target"</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">touchtime </span><span class="pun">==</span> <span class="lit">0</span><span class="pun">)</span> <span class="pun">{</span> <span class="com">// set first click</span><span class="pln"> touchtime </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Date</span><span class="pun">().</span><span class="pln">getTime</span><span class="pun">();</span> <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span> <span class="com">// compare first click to this click and see if they occurred within double click threshold</span> <span class="kwd">if</span> <span class="pun">(((</span><span class="kwd">new</span> <span class="typ">Date</span><span class="pun">().</span><span class="pln">getTime</span><span class="pun">())</span> <span class="pun">-</span><span class="pln"> touchtime</span><span class="pun">)</span> <span class="pun"><</span> <span class="lit">800</span><span class="pun">)</span> <span class="pun">{</span> <span class="com">// double click occurred</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"double clicked"</span><span class="pun">);</span><span class="pln"> touchtime </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span> <span class="com">// not a double click so set as a new first click</span><span class="pln"> touchtime </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Date</span><span class="pun">().</span><span class="pln">getTime</span><span class="pun">();</span> <span class="pun">}</span> <span class="pun">}</span> <span class="pun">});</span>
YouTube API seekTo Buttons: Code Example
Example uses 2013 World Weightlifting Championships Video
How to Control YouTube’s Video Player with JavaScript
Progress Bar
This is done using the
player.seekTo(sec)
function, which jumps the video to the seconds provided in the parameter.To demonstrate this we’ve made our own version of YouTube’s progress bar, using an input field of type range. When we click anywhere on it, we take the inputs value, witch gives us a percentage. We then use this percentage to calculate what progress we want made to the video and skip to the according seconds.
$('#progress-bar').on('mouseup touchend', function (e) { // Calculate the new time for the video. // new time in seconds = total duration in seconds * ( value of range input / 100 ) var newTime = player.getDuration() * (e.target.value / 100); // Skip video to new time. player.seekTo(newTime); });