Just testing that all, this should work with Safari, iPad, iPhone 4(due to bug http://rakaz.nl/2010/06/problems-with-html5-video-codec-detection.html) and for other browsers Flash is required for proper fullscreen support! Make sure you click the fullscreen button.
Update: When adding this video, I also discovered a fatal error, I didn’t notice this easily because the testing environment was running PHP 5.3, while the production environment (this blog) was running PHP 5.2. The function “array_replace_recursive” exists in 5.3 but does not exist in PHP 5.2, anyway I have fixed the problem. As you can see from above it running properly.
Not sure what I am doing wrong. In my WordPress I can update this HTML5 code very easy. It pops up in updates and I can just click to install it.
It just don’t work so I must be doing something wrong. With things that use the HTML5 video code I can get video to work. Can paste the code in this reply it deletes it. So I will paste in a linked PrtScn I did of it.
http://i93.photobucket.com/albums/l41/RaymondDay/Any%20thing%20else/WordPress_HTML5_no_work.jpg
The HTML5 code works but doing the code with the plug in just does not. I even tested it putting the HTTP right in the link not using the “..” for the folder it’s in all ready.
So if something is wrong what am I doing worng? I guess with this plug in it will work with other things that don’t use HTML5 vidoe code.
-Raymond Day
Tested it again. This time it worked. In Windows IE it shows this:
“your browser does not support the video tag HTML5
No video playback capabilities, please download the video below
Download Video: Open Format: OGG”
I had both in there so it showed it 2 times in Google Crome
I did click on the OGG and it open a player to play the video. But not in side Windows Internet Explorer.
I guess I need to install something on my Linux box that my WordPress is running on?
-Raymond Day
You don’t need to install anything on the Linux box, the plug-in won’t produce a flash fallback for ogg, because that format is not support by Flash. I assume you using Windows, you could try encoding a h.264 video using Handbrake and look at the tutorial at http://diveintohtml5.org/video.html#handbrake-gui
After doing that use the code below
[video]
{“src”:["wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.m4v",
"wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.ogg"]}
[/video]
Thank you Christopher. I did what you said but it gets this error now:
UNKNOWN ERROR: probably syntax error. @ Video Tag
I copy just how you have it. I tested it to conver it with ffmpeg like this:
ffmpeg -i “Squirrel jumped from bird seed.AVI” -acodec aac -ab 128kb -vcodec mpeg4 “Squirrel jumped from bird seed3.m4v”
If this post don’t remove any thing. Maybe it took out some of your text. I just copy it and past it.
The ffmpeg did not convert it good and with no sound. So I used the link you gave and from there downloaded and installed HandBrake on my Windows 7. It works very easy and good. It could not convert the video file off my LAN. So I copy it to my Windows 7 then it could convert it and it did a good job.
Something must be wrong with the code you put for this. It get that error in both IE and Google Crome.
-Raymond Day
To better show it here is how it looks now just trying to test if it works:
http://i93.photobucket.com/albums/l41/RaymondDay/Any%20thing%20else/WordPress_HTML5_no_work2.jpg
But this don’t work and get the error message.
All so your web page here all ways get a “Stack overflow at line: 15″ Just click OK and it clears. But any link back to your web page bring it up again.
-Raymond Day
It seems that the posh double quote round “src” is causing the error, replace those posh double quote with normal double quote or update to 1.4.4.
Also make sure you set the width and height as well, as flash can’t determine the width and height automatically.
[video]
{"src":["wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.m4v",
"wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.ogg"],
"width":640,
"height":480}
[/video]
Chris.
Hi again, I just fixed the stack overflow issue, it was caused by swfobject and I have now disabled swfobject on this site, the plugin does take advantage of swfobject but don’t worry that is disabled by default.
Chris.
Hi Chris. Yes the stack overflow error is fixed now on this web page.
I just did the code you have in here just copy and paste it. Added the ../ before the links and it works in both IE and Google Chrome. But I guess I need a start photo for the IE part or flash part. How would that be added in the code you made here?
Looks like I have to encode 2 videos to have this then. Is there a way to just encode it to be one video file that works with both HTML5 and Flash video?
Can see the little 2008-2010 Flowplayer Ltd in the bottom left corner of the video before it starts. I like that, It’s good to know what it’s using.
By reading some of what you have here sound like you do nice neat code. I never program on a PC but have on old TRS-80 and commodore 64 so Z80 and 6502 CPU in assembly. I like doing nice neat code on them. But I did see very sloppy code disassembling others codes. It works but takes up a lots of space and is slow.
Thank you for making this HTML5 plugin for WordPress. Looks like it coming a long very good.
-Raymond Day
Hi Raymond,
To answer the first question, easy just add the poster attribute. Work with Flash Video, work with HTML5 video but not as well as Flash.
[video]
{"src":["../wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.m4v",
"../wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.ogg"],
"width":640,
"height":480,
"poster":"photo.jpg"}
[/video]
See http://code.google.com/p/html5videoplayer/wiki/Syntax for details
As for the next question, it’s a yes and no answer, m4v/mp4 alone support both Flash and HTML5 video, but Flash video support is browser independent which is an advantage while HTML5 video is browser dependent which is a disadvantage, see http://en.wikipedia.org/wiki/HTML5_video#Table for details. Adobe will add support for WebM in the next version of Flash, but sadly Apple won’t support WebM for now, which means Safari, iPhone and iPad only support h.264. Internet Explorer 9 will support WebM, only if the user installs the codec but not many will do that. For the foreseeable future it’s looks like it going to be h.264 and WebM (replacing Ogg, except Vorbis) as the html5 video de facto.
I have heard of assembly language, at one time it was suppose to be the wave of the future but time as proven otherwise and the binary language took the crown and is used on PC and many other devices as of today, the binary language which is older then assembly and is low level. Modern high-level programming language such as C++ or PHP, uses either a compiler (C++) or a interpreter (PHP) to convert down to low-level binary language so the PC can understand it. English, Spanish, French and Japanese are example of high-level languages, and obviously something a human can understand well, which a machine won’t understand at all.
Anyway thanks for the compliment.
Chris.
O by the way this “High Definition Video (720p)” works very good in both Google Chrome and IE.
Looks very good full screen too. Played with a Intel D510MO that is a 2 core Atom with GPU on the same chip. I have a 1920 by 1080 display too and it played good with this over the web.
-Raymond Day
I have both the m4v and ogg videos they are the same video only not the same type. You said “m4v/mp4 alone support both Flash and HTML5 video” So can I just have the m4v video and lots of browsers will play that type video with your plugin in WordPress?
Thank you for adding the photo code with the video code!
I think assembly language is just as easy for human can understand as basic.
I have did some code in PHP just editing it on Linux. I never looked at any thing but PHP code to know how. So it is easy for human’s to understand.
-Raymond Day
I really should of said Flash support m4v/mp4 as for HTML5 Video that depend on the web browser, Chrome support both mp4 and ogg, Firefox only support ogg, Safari only support mp4 and Internet Explorer 8 and below does not render HTML5 Video therefore fallback to Flash. Browser that do render HTML5 Video and does not find a compatibility video source, it will show a big x and sadly won’t fallback and that is part of the HTML5 specification but JavaScript can be used to force fallback or you can load Flash first then use HTML5 Video as fallback with the code below.
[flowplayer]
{"video":{"src":"../wordpress/wp-content/uploads/2010/08/Squirrel_jumped_from_bird_seed.m4v",
"width":640,
"height":480,
"poster":"photo.jpg"}}
[/flowplayer]
The majority of web users have Flash installed on their PC or Mac anyway, as for mobile devices alot of them don’t have Flash therefore will fallback to HTML5 Video, alot of them nowadays also have hardware decoders for H.264 which m4v/mp4 happens to uses.
You’re welcome.
Chris.
Wow it just takes out HTML tags is says “You may use these” I said every see the Menuet OS. It’s 100% assembly language on a floppy for a PC. I put this link in HTML tags http://www.menuetos.net/
No HTML tags now so it should take this post.
-Raymond Day
Just did your code with the photo in it and it works! I only had to add the path were the photo is.
Thank you.
-Raymond Day