search

mozilla / popcorn-js

The HTML5 Media Framework. (Unmaintained. See https://github.com/menismu/popcorn-js for activity)
MIT License
2.14k stars 632 forks source link

Can't Use Popcorn.js with Youtube link #462

Open itzamit28 opened 9 years ago

itzamit28 commented 9 years ago

Please let me know how should I embed Youtube Videos with Popcorn.js. I found some of links where both Youtube and vimeo integrations are given but on those links only Vimeo videos are being integrated Properly is there any way where I can integrate my Youtube Videos with Popcorn.js

bytebrain commented 8 years ago

I have the same problem. When I try to use a YouTube embed link, the console throws a warning; 'failed to retreive duration data, reason: No longer available'

It looks like YouTube player API is changed and Popcorn is unable to see the duration time of the video.

Here a proof of concept with the same video, one embedded with iframe, other with Popcorn.

<html>
<head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
</head>
<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/r5QsG_5uwvM" frameborder="0" allowfullscreen></iframe>

    <div id="video" style="width: 360px; height: 300px;" ></div>

    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
           // Create a popcorn instance by calling the Youtube player plugin
         var example = Popcorn.smart(
           '#video',
           'https://www.youtube.com/embed/r5QsG_5uwvM' );

         // play the video right away
         example.play();
      }, false);
    </script>

</body>
</html>
troyapeterson commented 8 years ago

I'm hoping to create a Youtube/Wikipedia site over the next few weekends. Any assist with this issue would be awesome.