Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
noob needs help for videojs plugin
i’m a complete noob to php and even not a programmer, but i keep trying.
maybe someone finds the time to point me to the right spots..
im trying to build a plugin for video.js
its a nice html5 video player with lots of fall backs, but i want to make it easy for a non-html user to build the tag.
here you can find thefunction
function jnz_videojs($atts) {
extract(lAtts(array(
'width' => '800',
'height' => '600',
'directory' => 'files',
'file' => 'file_name',
'poster' => '2.gif',
'thumbnail' => 'false',
'controls' => 'true',
'preload' => 'true',
'autoplay' => 'false',
'flash' => 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
'img-alt' => 'Poster Image',
'error-message' => 'No video playback capabilities.',
'site_url' => $GLOBALS['prefs']['siteurl'],
),$atts));
return "
<script src=\"http://videojs.com/video-js/video.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
<script type=\"text/javascript\" charset=\"utf-8\">
window.onload = function(){
VideoJS.setup();
}
</script>
<video class=\"video-js\" width=\"$width\" height=\"$height\" poster=\"http://$site_url/images/$poster\" controls preload>
<source src=\"http://$site_url/$directory/$file.mp4\" type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' />
<source src=\"http://$site_url/$directory/$file.webm\" type='video/webm; codecs=\"vp8, vorbis\"' />
<source src=\"http://$site_url/$directory/$file.ogg\" type='video/ogg; codecs=\"theora, vorbis\"' />
<!-- Flash Fallback. -->
<object class=\"vjs-flash-fallback\" width=\"$width\" height=\"$height\" type=\"application/x-shockwave-flash\" data=\"$flash\">
<param name=\"movie\" value=\"$flash\" />
<param name=\"allowfullscreen\" value=\"true\" />
<param name=\"flashvars\" value='config={\"clip\":{\"url\":\"http://$site_url/$directory/$file.mp4\",\"autoPlay\":false,\"autoBuffering\":true}}' />
<!-- Image Fallback -->
<img src=\"http://$site_url/images/$poster\" width=\"$width\" height=\"$height\" alt=\"$img-alt\" title=\"$error-message\" />
</object>
</video>
";
}now what i need is some help with the true/false conditions for controls and preload.
i created the two variables, but i dont now how to handle these, like:
if (preload) {put the preload function into the tag, or leave it if !}
i dont now where i should do that. (same thing with autostart and controls)
then the poster (the preview image that shows up, when the film is not loaded / running yet). now you have to fill in an image id plus the file-extension. i know that this could work with the id only, but i dont even know where to start..
also the ‘site_url’ => $GLOBALS[‘prefs’][‘siteurl’]
i dont know if this is set at the right place, since that shouldnt be editable, or?
plus i dont know if this is the right way to handle the url ( src=\“http://$site_url/$directory/$file.mp4\”)
and the javacript. i saw mary’s upm_image plug-in, where she had the javascript being loaded in the head. it must be somewhere in the database. i wonder how she did that.
plus i guess it will become problematically, when loading more than one video on one page since the whole code thing is only devided by classes, but since i never tried that out, this problem may only exist in my head.
i builded this function with the help of anatomy of a textpattern plugin and some further reading, but since i am the noob that i am, i would totally appreciate any helping hand, and if its just a push in the right direction..
thanks
jnz
Offline
Re: noob needs help for videojs plugin
nobody willing to help, huh??
today i took myself the time to go further and think i came quite far. but still there are some css and js rules, and id love to load them from the db, instead of other webpages..
here you can find the working function. any comments?
function jnz_videojs($atts) {
extract(lAtts(array(
'width' => '640',
'height' => '264',
'directory' => 'files',
'file' => 'oceans-clip',
'poster' => '2',
'thumbnail' => 'false',
'controls' => 'true',
'preload' => 'true',
'autoplay' => 'false',
'css' => 'http://videojs.com/video-js/video-js.css?v=1284922850',
'flash' => 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
'img-alt' => 'Poster Image',
'error-message' => 'No video playback capabilities.',
'site_url' => $GLOBALS['prefs']['siteurl'],
),$atts));
extract($atts);
/* check db for image extension */
$catchExt = safe_row('ext', 'txp_image', "id = '$poster'");
$ext = $catchExt["ext"];/* use thumbnail instead of “normal” image */ if ($thumbnail == “true”) { $thmb = “t”; }
/* check for controls */ if ($controls == “true”) { $cntrl = “ controls”; }
/* check for preload */ if ($preload == “true”) { $prld = “ preload”; $prldFlash = “true”; } else { $prldFlash = “false”; }
/* check for autoplay */ if ($autoplay == “true”) { $auto = “ autoplay”; $autoFlash = “true”; } else { $autoFlash = “false”; }
return “ <link href=\”$css\” rel=\“stylesheet\” /> <script src=\“http://videojs.com/video-js/video.js\” type=\“text/javascript\” charset=\“utf-8\”></script> <script type=\“text/javascript\” charset=\“utf-8\”> window.onload = function(){ VideoJS.setup(); } </script> <div class=\“video-js-box\”> <video class=\“video-js\” width=\”$width\” height=\”$height\” poster=\”$poster$thmb$ext\”$cntrl$prld$auto> <source src=\“http://$site_url/$directory/$file.mp4\” type=‘video/mp4; codecs=\“avc1.42E01E, mp4a.40.2\”’ /> <source src=\“http://$site_url/$directory/$file.webm\” type=‘video/webm; codecs=\“vp8, vorbis\”’ /> <source src=\“http://$site_url/$directory/$file.ogg\” type=‘video/ogg; codecs=\“theora, vorbis\”’ /> <object class=\“vjs-flash-fallback\” width=\”$width\” height=\”$height\” type=\“application/x-shockwave-flash\” data=\”$flash\”> <param name=\“movie\” value=\”$flash\” /> <param name=\“allowfullscreen\” value=\“true\” /> <param name=\“flashvars\” value=‘config={\“clip\”:{\“url\”:\“http://$site_url/$directory/$file.mp4\”,\“autoPlay\”:$autoFlash,\“autoBuffering\”:$prldFlash}}’ /> <img src=\“http://$site_url/images/$poster\” width=\”$width\” height=\”$height\” alt=\”$img-alt\” title=\”$error-message\” /> </object> </video> </div> “; }
Offline
#3 2010-10-14 09:48:39
- Algaris
- Member
- From: England
- Registered: 2006-01-27
- Posts: 553
Re: noob needs help for videojs plugin
I’m afraid I can’t help with the plugin side of things as I’m not a programmer and know very little PHP. I would be very interested in this plug-in though as I’m in the process of planning a TXP site that will make use of VideoJS.
Good luck with your endeavours.
Offline
Re: noob needs help for videojs plugin
same here. löl.
but actually its running. only problem i have is that the css and the js are loaded each time, you insert the tag..
i could export a version, where you manually put the css & js into your head, so its not loaded several times.
i guess it wont make any problems, using it as it is right now, but for the beauty of code..
[EDIT]
found everything i needed..
its running right now. need some time for the documentation, but it will be finished soon.
Last edited by jens31 (2010-10-14 14:17:24)
Offline
Re: noob needs help for videojs plugin
whoop, there it is..
tell me, what you think and if you have any suggestions.
right about now you need all files (mp4, webm, ogg) and there is no option to control that.
i think it is required, but its not available right now.
jnz_videojs normal
jnz_videojs zipped
Offline
Re: noob needs help for videojs plugin
Hi jens, made you into a plugin author. It would be good if you posted your plugin, in the right forum
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: noob needs help for videojs plugin
yay :D
ill make it a thread, but for now its not really really slim and i want to modify it soon, cause now its working, but i still want to include the other css-skins and stuff.. optional format picking.. aaaah. somebody hand me out the time..
thx cloak
(i guess i should start a thread anyways..)
Offline