Trouble Playing M4V File

[pealo86]

This might be a really stupid question, but in order to play an m4v file through jPlayer do I need an actual m4v player installed on my system?

I have been pinching code from the demo on this page:

• http://www.jplayer.org/latest/demo-01-video/

I can get the videos that are on the demo page to work fine, but when I switch the m4v url to the m4v file on my website it does not work.

I can see that the demo script also offers the video in .ogv format, I imagine this must be an alternative incase I cannot play m4v files?

If I leave the .ogv url in the script, then it plays the video that is on the demo, but if I remove the ogv url then I just get a blank screen in place of where the video should be.

So basically, if I have only the m4v url and no ogv url, I cannot play anything. If I have both url's then I only see the video that is on the demo site (e.g. the ogv url, my m4v video appears to get ignored)

Could this mean that I have software to playback the video in ogv format but not in m4v? I'm using a Mac so it might be using Quicktime or something?

I just took it that the jPlayer plugin handled video playback itself? But now I'm thinking this isn't the case, is it because it's an HTML5 player?

[Mark Panaghiston]

From your description, jPlayer would be using the HTML5 solution to try and play the media in Safari. That is basically a <video> element in the page with the jPlayer bells and whistles hanging on it. The browser is playing the media... Or not in your case.

Visit the URL of the media directly in the Safari browser. If the media will not play directly in the browser, then you have a problem with the encoding.

The M4V format is an MP4 container with H.264 baseline encoded video and AAC audio.

[pealo86]

Oh right, yes I checked that and it won't play directly in the browser, I can play it on my desktop though?

[pealo86]

I've tried in Safari and Opera and the video file itself appears to play directly through the browser, but I think it may be through a Quicktime plugin.

No luck in FF, Chrome or IE though. And on top of that Safari & Opera won't play the video through jPlayer.

I can play the files fine on my desktop also, which is confusing! Also, if I change the extension to .m4a then I can play the video through FF, but then it won't play in jPlayer

[Mark Panaghiston]

Without a link to your dev project it is difficult for me to determine what is wrong.

[pealo86]

Here is a link to it:
http://tinyurl.com/5vrqjyh

Also here is a link to the m4v file:
http://tinyurl.com/5vkveoy

And the js:
http://tinyurl.com/6xxg4y3

If you could shed any light that would be much appreciated :D

Thanks.

[Mark Panaghiston]

You have included jQuery twice in the page. This is the main problem, as the 2nd time corrupts the first one and the plugins and code included between the two. The behaviour varies xbrowser too, so clean that up and things should start working.

Apart from that, your !DOCTYPE is not on the first line of the HTML. Your first line is empty. While most browsers do not care, some like IE are strict and will ignore it if not on the first line of HTML and the page will render differently as a result. I believe that IE9 assumes the webpage is ancient and it uses quirks mode, which will cause you other problems too.

[pealo86]

Ahhh right I see! Thanks.

Didn't realise something in WP was adding jQuery also.

I've sort of got it working, however it's only audio and no video?

[pealo86]

Ah wait, I think I just had to set the 'constant quality' setting in Handbrake ;)

Thanks a lot for the help :D

[pealo86]

Hmmm actually I can't seem to get it to work in any version of IE other than IE9?

I get this error in all IE browsers "Object doesn't support property or method 'jPlayerInspector'"

It even pops up in IE9, although the video does actually play in that one.

Also, I can't get it to work in Windows versions of Opera and Safari, yet it works in FF & Chrome.

Mac browsers appear to be fine however?

[Mark Panaghiston]

Delete this line in call.js:
$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});

The swfPath is a path, not a URL.
swfPath: "/~handstan/wp-content/themes/handstand-uk/script/jQuery.jPlayer.2.0.0"

I am only looking in Firefox right now... But I notice that you have not setup the CSS for the controls at all.
Is this expected at this stage in your dev?

[pealo86]

Yesss that's sorted it! Thanks a lot.

Was the inspector causing a problem then? I just took it off one of the demos thinking I needed it in there.

Also, would I need to change the swfPath depending on which page of the website the videos were on? E.g. if there were videos on one of the internal pages such as this? http://tinyurl.com/5wxp4vt

Oh yes I haven't yet styled the controls, will do this now that everything is working ;)

Thanks again.

[Mark Panaghiston]

You had not included the jPlayerInspector code, which was why that line caused an error. The demos have the inspector in them to help me test and aslo so that people can see what is going on.

If you use server absolute swfPath and media URLs then it should work anywhere on your website.

For example... Put your jPlayer playing, and all your other JS in 1 place. Lets call it "scripts". Then you can include the JS easily across the site and sefPath is "/scripts" for every page on your site.

[pealo86]

Ohh right I see, thanks again ;)

[pealo86]

Hmmm I seem to be suffering the 'audio only' problem again! Now that I'm pulling all of the videos in dynamically through Wordpress.

But I'm not sure if the problem is due to how I have encoded the videos using Handbrake. Do you know if the settings in the attached image are correct?

Also, here is my updated jQuery if that helps:

$(document).ready(function(){
    $('.jp-jplayer').jPlayer({
        ready: function () {
            $(this).jPlayer('setMedia', {
                m4v: $(this).next('input').val()
            });
        },
        ended: function (event) {
            $(this).jPlayer('play');
        },
        swfPath: '/~handstan/wp-content/themes/handstand-uk/script/jQuery.jPlayer.2.0.0',
        supplied: 'm4v',
        cssSelectorAncestor: '.jp-interface'
    });
});

[Mark Panaghiston]

Video Codec: H.264

Some of your jQuery is a little hard to be sure if it is right or not, but I guess that if the audio is working from those video files, something must be right.

For example, the $(this).next() in the ready event handler will be looking for the next <input> element after the jPlayer <div>. Then using is value for the m4v media url.

The more worrying one though is your cssSelectorAncestor setting. You are using a class for it. If you have more than one jPlayer interface on the page, they will all talk to each other making a right tangled mess.

The jPlayer <div> being a class is ok... jPlayer creates unique ID if the node referenced does not have one already. If you are generating jPlayer IDs too, then make sure you are not generating multiple IDs with the same ID... jQuery just gets the first one.

As for the cssSelectorAncestor... I can see why you want to make it a class... So you can slap these on the page easily without having to generate the unique IDs. But you need a unique ID so you can associate the interface with the instance.

I guess that you only have 1 on a page in your dev setup. If you put 2 on a page, it will break.

[pealo86]

Oh I see. I think I set cssSelectorAncestor as a class so that I could easily apply the jPlayer method to each of the players on the page.

Would it be better to perhaps loop through each player using the .each() method?

At the minute there are in fact 7 players on the page (maybe why it's not working propery!) it's just only one is visible, to get the others to display you need to click the thumbnails to the right of the player.

As for the $(this).next() section of the code, yes this does in fact pull the URL from the value of a hidden field (the value is placed there by WP).

Thanks.

[Mark Panaghiston]

You might want to consider using things a little differently... I think you are using the jPlayer 2.0.0 version at the moment, but in the devlopment patches we came up with a slightly different structure in jPlayer 2.0.3 where the cssSelectorAncestor is moved to the outer container of the HTML for the video player interface. The default was also changed to jp_container_1.

My point is... then WP could generate the HTML and add the unique container ID to the outer div which has the jp-video class in our demos. Then use $(".jp-video") to get all the containers and in a $().each() loop you can get its ID and .find(".jp-jplayer") and instance jplayer on it. Then the jPlayer options can know the ID of the cssSelectorAncestor container ID. Remeber to change the ID to a selector... "someId" goes to "#someId" selector.

I think in that way, WP would only need to generate unique IDs for the containers (cssSelectorAncestor) and then your jQuery could do the rest.

At the time, you might want to start using the development version of jPlayer too, since it has a few minor changes that affect how it is used. Plus it is a lot better with fewer bugs and more features. It's just that you will have to gleam the docs from my posts in the dev thread:
https://groups.google.com/d/topic/jplayer/rdWPvU4GpB8/discussion

That thread has been hijacked a few times by others, so the dev notes have become rather polluted with support questions... Look for my posts, especially  those starting with "jPlayer 2.0.X patch released on GitHub". We are currently at 2.0.14 and I plan to upload 2.0.15 later today after i run some tests on it.

[pealo86]

Ahhh right I see.

I'm having a bit of trouble finding version 2.0.14 to be honest, I've managed to find 2.0.3 here https://github.com/maboa/jPlayer/blob/master/jquery.jplayer/jquery.jplayer.js

But would you recommend I go for 2.0.14? If so could you send a link please?

Thanks

[Mark Panaghiston]

From the jplayer.org homepage:
https://github.com/happyworm/jplayer/

Click the big download button on the right... And select the download format for the master. You'll already have the download tagged as 2.0.0

[Rob Berrones]

The file plays fine directly in browser, but not in the page. I'm using the exact code from your demo. It works everywhere but Chrome. I am using jPlayer 2.4.0