Fork me on GitHub

Project Notes

Scripting YouTube

An experiment in scripting the YouTube player with external controls and the IFrame API.

Notes

I have some ideas for how I’d like to be able to embed YouTube, but they hinge on the ability to control a YouTube player and also get feedback on current player position. this is a quick test to see if all these possibilities are realistic.

A quick search yeilded the YouTube Player API Reference for iframe Embeds, which appears to be the right medicine. So that’s what I’m going to try..

Objectives:

  • external play trigger
  • mark times
  • play section between marked times
  • loop between marked times

Some Useful Features of the API

onYouTubeIframeAPIReady is a function that must be implemented. It is called by the API when loaded and ready.

Playback controls include

  • player.playVideo():Void
  • player.pauseVideo():Void
  • player.stopVideo():Void
  • player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void

Playback status

  • player.getPlayerState():Number
  • player.getCurrentTime():Number

Mark and Loop

The getCurrentTime() function gets the appropriate video position for a “Mark” operation.

Rewind/set to play from a specific time mark can be achieved with the seekTo() function.

It seems there’s no direct way to directly combine an end time with seekTo().

To play a specific time window (from startSeconds to endSeconds) appears only to be directly supported by the loadVideoById and cueVideoById functions. But these entail reloading the entire video, so not ideal for performing a loop between start/end in an already-loaded video.

So the approach that appears best is:

  • use getCurrentTime() to mark start/end points
  • start a loop with seekTo(), and use setTimeout to fire at approximately the desired end point.
  • at the end point, either stop the video or loop back with another seekTo() depending on whether infinite looping is desired.

An Example

The example.html loads a preset video, initially stopped, and enables some simple controls. Only plain-old-Javascript and the IFrame API are used.

Play, Pause and Stop buttons have their expected effect.

A Mark button is use to set/reset the start and end markers.

  • when the second mark has been added, it will automatically replay the video between the two marks
  • if the ‘loop’ checkbox is selected, the video will loop between the two marks

running

Credits and References

About LCK#87 javascript
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.