CODEWITHSUNDEEP
javascripthtmlvideoyoutube
RunningFromShia
RunningFromShia

Reputation: 610

Javascript - Adding Video Element features to embedded Youtube content

let me start with what I already have: HTML5:

<video id= "video" preload=auto autoplay controls>
<source src = "http://www.w3schools.com/html/mov_bbb.mp4">
</video>

JS:

<script>
video.addEventListener("loadedmetadata", start);
var track;
var data;
var currentX, currentY;
function start(){
    data = video.getBoundingClientRect();
    track = video.addTextTrack("captions", "English", "en");
    video.addEventListener("mousemove", movement);         

}
function movement(e){
    currentX = e.clientX, currentY = e.clientY;

}
</script>

So as you can see, I have basic HTML5 video element, to which I add events and manipluate later on in various ways. One of the things I do with these events is adding dynamic captions(addTextTrack) to my HTML5 video via ajax call to a Node server. It all works fine, but here is the actual problem:

I want to be able to do all of these things with the youtube API:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/QtXby3twMmI" frameborder="0" allowfullscreen></iframe>

but can't do many of the things listed above because youtube provides an Iframe to work with.

Now last thing, I'd appreciate solutions without using jQuery or big libraries because at the end, I suggest an API myself to clients, and I do not want to force big libraries on them. Thank you.

Upvotes: 3

Views: 676

Answers (2)

michaelmesser
michaelmesser

Reputation: 3726

You can use the option that youtube provides, which are available here or if those are to limiting you can download the video with youtube-dl and host it on your server. Then you can use it like an other html5 video.

Warning: Using youtube-dl may not be legal (it violates Google's TOS). Consult a lawyer first.

Upvotes: 1

H&#233;ctor Le&#243;n
H&#233;ctor Le&#243;n

Reputation: 2400

You can use this awesome Plyr package and install it via: npm, bower, Ember or use a CDN

  • It's semantic ( <video> tag )
  • Responsive
  • For Youtube and Vimeo
  • Written in "vanilla" JavaScript ( No libraries dependencies )

and the total weight is less than 60 Kb totally acceptable.

By now i think this is the best choice :) hope help you.

Upvotes: 1

Related Questions