jnz_videojs

jens31 · 2010-10-18 09:12:05

my very first plug-in for the html5 video player videojs.
still not perfect, but running.

v0.1
optional autoloading of css & javascript in the head.

v0.1.2
corrected the errors mentioned by hanz in thread #5
supports ogv files from now on.
corrected the javascript variable and the help.

to do:
implement other css classes like vimeo, youtube, hulu. (they are now available too, but the classes are not implemented into the plug-in itself. it would be kool to have them right within it.)
optional format choice (right now you have to implement webm, ogv & mp4, also the codec is “fix” right now.)

see the plug-in help for all the available options / settings (width, height, poster image, preload, controls etc.).

download
download zipped

the rendered tag looks something like this:

<div class="video-js-box">
	<video class="video-js" width="640" height="264" controls preload poster="link/to/site/images/3.png">
		<source src="link/to/site/directory/filename.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
		<source src="link/to/site/directory/filename.webm" type='video/webm; codecs="vp8, vorbis"' />
		<source src="link/to/site/directory/filename.ogv" type='video/ogv; codecs="theora, vorbis"' />
		<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
			<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="flashvars" value='config={"clip":{"url":"link/to/site/directory/filename.mp4","autoPlay":false,"autoBuffering":true}}' />
			<img src="link/to/site/images/3.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
		</object>
	</video>
</div>

Last edited by jens31 (2011-03-15 13:41:14)

merz1 · 2010-10-19 15:29:54

Does it have or do you plan to have a fallback to Flash depending on browser capabilities?

DE: Siehe auch site: http://praegnanz.de/ HTML5

Edit: OK. Thanks for your answer and adding the code examle which also answers my question.

Last edited by merz1 (2010-10-21 10:24:19)

jens31 · 2010-10-19 15:34:12

the plug-in has a built-in flashfall-back.
but i didnt implement the option to deselect it (yet).

Algaris · 2010-10-20 09:57:45

Amazing. Thank you. I’ve just started working with Video-JS for a project. I’m not really in a position to use this plug-in at the moment but further down the road it will be a big help.

Thank you.

Last edited by Algaris (2010-10-20 10:01:38)

hanz · 2010-10-31 18:21:45

Hey Jens,

I just stumbled upon your plugin. Great work!
I noticed that it had some problems while running in debug/testing mode. When I got an error inside the parsed javascript I took a closer look.

While doing this…

function jnz_videojs_js() {
	header("Content-type: text/javascript");
	echo <<<js
	       ...
               version = parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1], 10);
               ...
         js;

This JS-$version-variable gets replaced by PHP, so after the parsing it just:

version = parseInt(testObject.GetVariable("").match(/^[^\s]+\s(\d+)/)[1], 10);

Maybe that could lead to problems, when using the flash-fallback.
I’m not quite sure how to solve this. Maybe someone has an idea.

Another thing I notice is, that the example code in the help-text says:

EXAMPLE CODE:
<txp:jnz_videojs file=“example” poster=“3” css=“http://videojs.com/video-js/skins/tube.css?v=1284922850” class=“tube-css” />

But the tag attribute isn’t “file”, it’s “video”, right?

Oh, and a last thing :)
In the beginning I really had problems getting videojs to work. After a while I noticed that your plugin puts out “.ogg” while the newest version of videojs uses “.ogv” as file-extension in their output. That’s why I started editing your plugin in the first place. Finally everything is working now!

Maybe you can use all this information somehow.

Cheers, Hannes

p.s.
I just updated the code to the newest videojs-version and now it breaks at some more places inside the code. There are also problems with \n \r stuff. So I switched to use only external JS-files to avoid those problems.

Last edited by hanz (2010-10-31 19:09:24)

kstewart · 2011-03-15 00:33:10

I’m struggling a bit using this plugin… any help out there for a step-by-step guide for a complete noob? Just started using textpattern and still getting my head around what to put in forms, pages, css, etc. Tried loads of video embed galleries but none seem to work… (prettyPhoto, flowplayer, arc_youtube plugin, etc… ) Would like my new video page to look like my old site – www.kimstewart.co.uk/after_meiran.html

It currently looks like this: http://www.kimstewart.co.uk/textpattern-4.3.0/videos/

Appreciate any help going.

jens31 · 2011-03-15 09:41:30

hi kim

hmm, hard to tell, since i dont know any of your code.
what i saw upfront is that the javascript is missing. look under the tab extensions for the jnz_video tab and activate it.
plus i dont know what this snippet is for on ur site

VideoJS.DOMReady(function(){

hmm. forms, pages, css.
so you create your sections and you can make them point to a specific page. CAN cause you could stack everything in one page and use the txp:if_section function to make the code only be phrased in that section.

plus the forms, that can be called via <txp:output_form form="formName" /> or via <txp:article form="formName" />
while article tags itself can provide the article specific tags like title, body, posted etc…
forms could be the navigation, that you call on each site, or the footer.
just put your html and stuff in there and call it on each page, so if you have to change something, you just change the form once and update the whole page, whitout going through each page. i for example use it for my complete <head> part and stuff like that..

my videotag is more likely made for articles itself. so you just create an article and put the tag in there, plus the source and all the other required stuff.. and when you publish it, it will create the html video tag for you.

jens31 · 2011-03-15 09:47:46

yo hanz

didnt see your code at all, sorry for that! and thanks for the hints!
so ill compile an new version ~~during the next days…~~ – look above, the new version 0.1.2 is online.

this stuff is always welcome since i am a noob by myself, when talking about php and stuff..

Last edited by jens31 (2011-03-15 13:38:00)

kstewart · 2011-03-15 12:20:10

Hey Jens,

Thanks for replying. Had deactivated the jnz_video tab as a warning kept coming up saying javascript could not be found….

VideoJS.DOMReady(function(){ – was something I put in a form… dunno why!

Will try putting the video tag in the articles themselves… currently have an article with the following:

<txp:jnz_videojs video=“example” poster=“3” css=“http://videojs.com/video-js/skins/tube.css?v=1284922850” class=“tube-css” />

Haven’t altered it to my own video yet… Will try all this again after lunch! Thanks for your help.

jens31 · 2011-03-15 13:38:56

good luck with that.
the new version is ready for download in the first post.

kstewart · 2011-03-15 21:27:49

I’m afraid I ended up just using the_video plugin and having straightforward vimeo vids for the moment! Will look into it further at a later date as wanted a gallery like prettyPhoto. Thanks anyway.

Algaris · 2011-08-23 15:05:24

Thank you for this plug-in it really simplifies the process of using Video JS on a website.

For some reason I keep getting Javascript errors in Internet Explorer.

Webpage error details
.
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 23 Aug 2011 14:48:51 UTC
.
Message: Object doesn’t support this property or method
Line: 320
Char: 5
Code: 0
URI: http://example.coml/index.php?js=jnz_videojs

Also I can’t get the video to play in Firefox. It shows me the poster and the video interface but nothing happens when I click play.

The code I’m using is:

<txp:jnz_videojs video="ts" width="358" height="269" poster="10" />

Last edited by Algaris (2011-08-23 15:11:27)

Textpattern CMS

Textpattern CMS support forum

#1 2010-10-18 09:12:05

jnz_videojs

#2 2010-10-19 15:29:54

Re: jnz_videojs

#3 2010-10-19 15:34:12

Re: jnz_videojs

#4 2010-10-20 09:57:45

Re: jnz_videojs

#5 2010-10-31 18:21:45

Re: jnz_videojs

#6 2011-03-15 00:33:10

Re: jnz_videojs

#7 2011-03-15 09:41:30

Re: jnz_videojs

#8 2011-03-15 09:47:46

Re: jnz_videojs

#9 2011-03-15 12:20:10

Re: jnz_videojs

#10 2011-03-15 13:38:56

Re: jnz_videojs

#11 2011-03-15 21:27:49

Re: jnz_videojs

#12 2011-08-23 15:05:24

Re: jnz_videojs

Board footer