Hi,

I am having trouble understanding how width and height are set on a Vimeo video element instance

the code in the wrapper tries to get the width and height from the parent element (a div in my case)

but I could only get it working when setting dimensions as inline styles and replacing line 79 and 80 with :

width: parseInt(parent.style.width)|0 ? parseInt(parent.style.width) : MIN_WIDTH,
height: parseInt(parent.style.height)|0 ? parseInt(parent.style.height) : MIN_HEIGHT,

Also I could not set a width or height in the options when creating the player

I am probably doing something wrong but would lova a little help

thnks

See:

http://jsfiddle.net/popcornjs/7Ku6T/1/

The Vimeo live demo linked to from http://popcornjs.org/popcorn-docs/players/#vimeo doesn't run because it's embed div id is "vimeo" but the pop object is called using "#youtube" — easy/quick fix.

Demo is here: http://jsfiddle.net/popcornjs/gBEek/

Everything works when line 2 of the JS is changed from

var pop = Popcorn.vimeo( "#youtube", "http://vimeo.com/18359846" );

to

var pop = Popcorn.vimeo( "#vimeo", "http://vimeo.com/18359846" );

On Popcorn.js download page, there's a link http://mozillapopcorn.org/build-tool which should navigate to a valid page, but the page is not found.

On line 535 of the downloadable uncompressed version of popcorn.js Popcorn.util.toSeconds does not pass this.options.frameRate as a second argument.

The same is true for line 594 of the exec method.

EDIT: There are actually multiple calls to the toSeconds method from within popcorn where it doesn't pass the frameRate option and in addition to that, there are places where "framerate" is used instead of "frameRate"

Hi,

In the Youtube Player API documentation, they mention an unstarted state (-1).

This state is triggered when playing videos part of a list, like these ones: http://www.youtube.com/watch?v=ZXrHkIz-krE&list=PLjTlxb-wKvXNSDfcKPFH2gzHGyjpeCZmJ&index=1

For the moment, the Youtube's wrapper does not trigger this state so it's impossible to catch it from the outside (except by listening to message posted by the Youtube's iFrame).

I've did it in my own version of Popcorn-JS, taking the shortest path: arnaudbreton@484e9c9

I'm now wondering how to integrate it in the official version, using the cleaner solution?

Thanks for your help.

It looks that many fiddles for the plugins under http://popcornjs.org/popcorn-docs/plugins/ do not work anymore.

For example http://popcornjs.org/popcorn-docs/plugins/#Tagthisperson and many others. No idea if the fiddle is outdated or if it's a bug? Can someone of you have a look at this?

Hi,
Looks like Chrome beta (possibly non-beta too) not playing via the #play() interface.

To reproduce, hook remote debugging to your mobile device, and within Chrome Beta, go to http://popcornjs.org and issue a Popcorn('#video').play() in the Javascript Console on your desktop (which is remote debugging the mobile Chrome).

Nothing will happen.

Thanks.

Please have your Account Owner update your payment settings. Visit the Lighthouse Help forum if you have questions.

Popcorn doesn't set the content-type to "application/x-www-form-urlencoded" before sending POST data with Popcorn.xhr. Is there a reason for this? I can't seem to handle the request server-side (at least with PHP) without setting it.

Thanks!

When the Vimeo video is password protected the player is created but with Vimeo's password overlay (as you'd want). However no events are fired either before or after entering the password.

I have tried most events and none of them fire.

As an example I have Big Buck Bunny hidden behind a password.

1. Enter password: hippo
2. See no events firing
3. Press play
4. Still no events
5. Re-run fiddle
6. See 'durationchange' is fired
7. Press play
8. Lots of 'timeupdate' events

(Posted on SO as well)

Hi,

In http://popcornjs.org/popcorn-docs/media-methods/#seeking, there is a typo in the “Purpose” section (at the end): “no arguements” instead of “no arguments”.

I'm trying to create a popcorn instance using an audio element located in the parent window (independant custom player app) of my current iFrame(custom slide), in order to listen the parent frame audio tag.

Thanks!

I get the controls and the bar, but not the large arrow. Help?

I use popcorn.cue to start multiple animation (like a timeline). If i add the controls to my audio and drag the controller at a previous time all the animation are mixed-up. is it possible to reverse or something else? To be at the right place (time).?

Thanks!

Hi,

When i play youtube video i see this error message in the console.
popcorn-complete.js:10218 Uncaught TypeError: Object # has no method 'isMuted'

The line is 10218 of popcorn-complete.js file and the code:
if ( lastMuted !== options.youtubeObject.isMuted() ) {

Regards

I wonder if it's easy to style the video players easily with CSS on popcorn-js?

Most 3d party video players like videojs place new div elements for the control bar, the play button etc so that it becomes easier to syle.

Does popcorn-js have/allow this?

Calling play(N) with a time parameter N does not work on iOS 7. The clip will start playing at the beginning. The only way I could get it to start playing at a specified time was to use currentTime(n), bind a listener to the 'seeked' event, and then call play() in the associated callback.

src tag points to file://url

Line 68 in popcorn.webpage.js is messing up local pages

options.src = options.src.replace( /^(https?:)?(//)?/, "//" );

The intention behind the line seems to be used as a user friendly option but the consequence is it fails to load webpages when ran locally.

I'm writing an app that plays music from YouTube and SoundCloud. I have a big area where the videos are shown, and when I play something from SoundCloud, I'd like to show SoundCloud's embedded player UI instead.

Unfortunately, popcorn only supports playing audio from Soundcloud and hides the entire player UI. After reading the code there seems to be no way to turn this on via optional setting either.

Are there any plans to support this in the future? Would you accept a pull request if I where to implement this?

Set up test case in which my standard IE8 (virtualbox ie8 xp, from modern.ie) has a script error - MediaError is undefined, at the line where it is tested-for then set. I'm using popcorn + ie8 wrapper + media proto + vimeo player ONLY.

Test code:
http://jsfiddle.net/EtepN/

You can execute from IE8 be going to
http://jsfiddle.net/EtepN/embedded/result/

Works in IE9+ as well as all the moz/webkit browsers, of course.

I am creating a sequence by following the documentation at: http://popcornjs.org/popcorn-docs/modules/#sequence

I see we can set one source file per clip, but to achieve full browser support I think 3 formats of each video are needed.

How can I specify multiple video formats in a sequence?

Hi,

I'm experiencing some troubles with Safari Mobile limitations concerning the first interaction requirement that prevent the audio to start by the programmatic way.
Does Popcorn.js allow to bypass this limitation? Do any of you know any alternative solution?

Sincerely.

When I first started using Popcorn i had no problem using the YouTube player on iOS. The user had to press play, but otherwise everything worked.

Now, the play button does not even appear. The Popcorn.js fiddle for demonstrating the youtube player exhibits this behavior: http://jsfiddle.net/popcornjs/whvkP/

Just want to clarify if this is a bug or expected behavior/limitation.

Thanks.

Because of different versioning format from Bower one(called Semantic Versioning. see semver.org, I am not able to install latest version of Popcorn.js via Bower(using command "$ bower install popcornjs").

So, could you rename the tags to be compatible with semver format?

For example,
v1.3 -> v1.3.0
v1.2 -> v1.2.0
…

When using the popcorn.js code plugin, is it possible to pass more than one start/end rule object? I realize I could very easily call the code() method as many times as I needed, but I just wanted to see if there was already an elegant way to handle this.

The documentation shows how to use one rule like this:

var pop = Popcorn( "#video" );

pop.code({
    start: 1,
    end: 3,
    onStart: function( options ) {
        document.getElementById( "test1" ).innerHTML = "Yes";
    },
    onEnd: function( options ) {
        document.getElementById( "test1" ).innerHTML = "No";
    }
});

Thanks!

Hi,

I've just started to use PopcornJS which is awesome to handle these many video providers!

I'm working with subtitles, in SRT format, from Coursera (http://coursera.org) and their subtitles start with a blank line.

When I parse this file, it crashes, line 63 (idx = time[1].indexOf( " " )).

Thanks for your help.

Running playbackRate() on a baseplayer element returns 'undefined', and setting it doesn't seem to affect the apparent rate at which it plays.

disclaimer: i'm using CDN'd popcornjs, so sorry if this is a dupe

Hi,

Another newbie post.

How do I show a vid is loading? In other words how do I show a loading animation while the video is loading.

Hello,

I have a plugin that displays a div above the video. I set the start param to 0.
The start function of my plugin is called when the video starts. But if the video loops then the start function is not called again.

I noticed that when i change the start param to 1 then the start function is called again after looping.

I need the start function to be always called after looping.

Regards,
Lion

I have created a simple sequence of videos using popcorn.js following the documentation: http://popcornjs.org/popcorn-docs/modules/#sequence

I need the sequence to loop after ending so I added a listener like:

function playsequence(){
    sequence.play();
}
sequence.listen( 'canplaythrough', playsequence );
sequence.listen( 'ended', playsequence );

The thing is that when the sequence ends, the last video is repeated once and then it stops.

Any idea on how could I get a loop for the entire sequence?

The YouTube player API offers the following hooks for adjusting the playback rate. If no one beats me to this, my plan will be to circle back in ~48 hours and create a pull request that adds this the wrapper.

https://developers.google.com/youtube/js_api_reference

player.getPlaybackRate();
player.setPlaybackRate(suggestedRate);
player.getAvailablePlaybackRates();

Hi!

I'm using popcorn null wrapper and in IE10 custom events may not be triggered in case calling play() from click event.

It sounds strange, but please check my example here: http://fiddle.jshell.net/vadim_bulochnik/7wtRL/2/show/

You can see that in IE10 only 'play' event fires, while in all other browsers 'timeupdate' event also fires (and in IE11 also ok).
I've tried to debug this issue and found that sometimes IE10 just ignores document.dispatchEvent() in popcorn._MediaElementProto.js on line 120.

After googling I found that seems this is a known bug:
http://connect.microsoft.com/IE/feedback/details/786395/dispatchevent-doesnt-trigger-click-when-called-from-on-click-reactivated
http://connect.microsoft.com/IE/feedback/details/802397/ie9-ie10-events-can-be-sent-to-the-wrong-listeners

Have you ever experienced a similar problem? Maybe there is a workaround?

Thanks!
Vadim

Hi

I have some privacy concerns with the included JWPlayer wrapper. It seems to phone home with information regarding which video the user is watching and the IP of the user, and it's impossible to turn off. http://www.longtailvideo.com/support/forums/jw-player/bug-reports/29508/jw6-phones-home-privacy-concerns/

I just wonder if you could give me any advice regarding plans to support other wrapped players that can be used as flash fallback for video/mp4?

Thanks!

Hello,

Is it possible to use Popcorn-js in order to trim a video?
Meaning - set start point and end point on the video timeline, and create a new video instance of the trimmed section?

Hi,

The seeking() method always returns false.

Hi there!

First of all, sorry, because I posted the same ticket at Lighthouse. But I can't find it in the tickets list, so I decided to re-post this issue here.

When using popcorn.js 1.3 with baseplayer all binded events doesn't fires again in case seeking backward.
You can check example here: http://jsfiddle.net/vadim_bulochnik/VNPDc/

Thanks!
Vadim

I have some plugins that I'm trying to have as precise as possible. Changing to frameAnimation: true improved precision, and it Google Chrome it works perfectly.* In Firefox, the timing is at least a tenth of a second off. When dealing with certain things like muting specific words within a sentence, this can make or break the application.

• or at least well enough to be indistinguishable from perfect timing

http://popcornjs.org/popcorn-docs/media-methods/#playbackrate should have the R for Rate, since the real method is different than documentation. Heheh.

Also you should note that it cannot be set to negative values for reverse video.

Hello,

I try to use the sequencer plugin ( not sequence, sequencer, the one in use on popcorn.webmaker : https://github.com/mozilla/butter/blob/master/public/templates/assets/plugins/sequencer/popcorn.sequencer.js ) for my popcorn. But that dont work, chrome report " Object # has no method 'trim' ". It should have Butter dependencies.

Is there a way to use this plugin without deploy butter ?

As far as I can tell it used to be possible to access active Parsers through the Popcorn.parsers object, on which they were keyed by filetype extension. Fourteen months ago, as part of a commit affecting the parser module, the line responsible for adding the parsers to this object was modified and commented out. It hasn't been touched since.

The associated t297 doesn't seem to give any reason for this particular change. The current behaviour seems to be to assign Popcorn.parsers = {};, but never use the object again. This doesn't seem like intended behaviour.

I'm working on a patch for Butter that would allow parseable files to be imported by dropping them on the timeline. The only way to find parsers now seems to be to iterate over the Popcorn prototype and look for properties matching /^parse/. I'd like to see the functionality return, either by restoring the original line or something new.

The subtitle plugin has the option to specify the id of the document element that the content is appended to:

Example:

var p = Popcorn('#video')
    .subtitle({
        start:            5,                 // seconds, mandatory
        end:              15,                // seconds, mandatory
        text:             'Hellow world',    // optional
        target:           'subtitlediv',     // optional
    } )

But when I use the SRT parser I can't find a way to display the subtitles in a document element with a custom id.

If I add the id of the document element directly to the code of the srt parser, it works:

    sub.text = sub.text.replace( /&lt;(\/?(font|b|u|i|s))((\s+(\w|\w[\w\-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\s]+))?)+\s*|\s*)(\/?)&gt;/gi, "<$1$3$7>" );
    sub.text = sub.text.replace( /\\N/gi, "<br />" );
    sub.target = "the-id-of-my-document-element"; // <---- THIS IS MY ADDITION
    subs.push( createTrack( "subtitle", sub ) );

But it would be much better and useful to have the possibility to specify the id of the target document element as an argument of the parser.

Is it possible?

Thanks

Using this code:
<video data-timeline-sources="subs.ttml" ...>
gives:
TypeError: 'null' is not an object (evaluating 'source.match( /(.*)[/]([^/]+.\w+)$/ )[ 2 ]')
in popcorn-complete.js:2794

Changing data-timeline-sources to "./subs.ttml" seems to work, not a critical bug in my book :).

Just came across popcorn-js after a few days searching for something to handle ttml-subtitles without using flash, this looks promising!

Hi all, I think it would be useful to be able to set the HTML "scrolling" option on iframes for the webpage plugin. Scroll bars can look ugly, and it's not alway possible to hide it with CSS, here is a patch I made : mammique@e49684b

Bests,

Camille.

Hi,

newbie here.

I need to add a listener that will play a video between a specified range. Like say between 3 seconds and 5 seconds. Then the video should stop at the 5 second mark.

If i click on a button the video should seek to the 3 second mark, play to 5 seconds and stop.

I am sure there is a simple answer but my javascript really sucks.

Thanks

If I use popcornjs to embed a Youtube video, everything works fine, and the footnotes work perfectly.

But when I try to use it on a manually embed Youtube video, footnotes doesn't work at all.

Am I missing something?

Here's the code : http://jsfiddle.net/adamedoe/xMjJa/

The changeSrc function sends an JSONP request to get the duration of the video. If this request returns no data (ie the video id doesn't match any video) it logs a message to the console and returns silently instead of triggering an error event.

The HTMLVideoElement for example in that case triggers an error event and the error property is set with a MEDIA_ERR_SRC_NOT_SUPPORTED MediaError (see http://jsfiddle.net/popcornjs/D88FP/)

Perhaps a personal issue, rather than a global one, but it's one I can't get round. Using the YouTube player I'm loading my .srt successfully in all browsers, but the subtitles only appear in their assigned div in Chrome. FF displays nothing at all.
Basic version of my code here: Gist

When users try to claim a space with a period in it, there is no error displayed. The user is simply stuck unable to continue.