Need help embedding videos in html5

[Pullo]

Hi,

Just chose a page where the video poster is not displaying properly, then add preload="none" to the video tag of that page (ensuring to remove any other preload attributes first).

[jeffocal]

Adding "preload="none"" to the script had no effect the startup screen appears and them disappears

[ralph.m]

You do have a few weird things in your code that would be worth cleaning up:

<video height="240" width="320" poster="&#13;&#10;http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/the_theory_of_everything_1.jpg" controls="controls"><source type="video/mp4" src="&#13;&#10;
http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/29_the_theory_of_everything_1.mp4" /><source type="video/webm" src="&#13;&#10;http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/29_the_theory_of_everything_1.webm" /><source type="video/ogg" src="&#13;&#10;http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/29_the_theory_of_everything_1.ogg" /><!-- Fallback object<br />
using Flow Player --><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><param name="flashVars" value="config={'playlist':['</p>
<p>http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/the_theory_of_everything_1.jpg',{'url':'</p>
<p>http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/29_the_theory_of_everything_1.mp4','autoPlay':false}]}" />*<img alt="My Movie" src="<br />
http://www.theimagineershome.com/blog/video/29_the_theory_of_everything_1/the_theory_of_everything_1.jpg" width="320" height="240" title="No video<br />
playback capabilities, please download the video below." /> </object></video>

Not sure that will help, but I'd remove those bits in red anyway. I assume the weird 
 bit at the start of the URLs is code that represents a line break or something. Make sure there's no gap between the " and the http.

I would also recommend leaving preload="none" in for a while at least.

[jeffocal]

Thanks again Pullo and Ralph

I think we are finally got everything working as it should BTW Pullo you were right putting the words preload="none" into our script solved the start up image loading problem in IE9

Ralph could you please visit << http://www.theimagineershome.com/blog/?p=27 >> and make sure that I am not just imagining things

If everyone agrees that it is working I post it so that other can benefit from our efforts

Thanks again

[Pullo]

Hi Jeff,

Adding "preload=none" means that the video will not start loading until the user hits play.
This could cause quite a delay for some of your users, so you'll need to weigh up if this is really the best solution for you.
Unfortunately, I don't have IE9 on Win7, so I can't check if this is fixed.

What do you think @ralph.m ; ?

[jeffocal]

Thanks friend

I am pretty confident that we have resolved most of the major issue with play back and the startup screen. I am aware of the fact that The video may take a little longer to load but as you mention it is a trade off. I am still having a problem with safari in windows 7 however it seem to work ok in windows 8. I have a few of my friends working on that problem I'll post when we get it resolved.

Thanks again friend

Jeff

[ralph.m]

Ralph could you please visit << http://www.theimagineershome.com/blog/?p=27 >> and make sure that I am not just imagining things

It's working well in IE9 on Win7 for me now: placeholder image is there, and the video plays nicely when requested (with no delay, either, which is good, and I'm not on a really fast connection).

Unfortunately, I don't have IE9 on Win7, so I can't check if this is fixed.

Yup, 'tis.

I am still having a problem with safari in windows 7 however it seem to work ok in windows 8.

This may be cold comfort, but Apple has abandoned Safari for Windows, as it seems no one was using it. So I personally wouldn't worry about that.

[jeffocal]

One last request.

.Does anyone know how I can get the player skin to appear in IE9 without a mouse over. I most article to see it one must move the mouse over video window

[Pullo]

Hi Jeff,

As far as I know, this is the default behaviour in IE and I couldn't find a way to override it.
There is a slightly more complicated solution, however, and that is to build your own set of controls.
It seems possible to get these to always display.

Here is a good article to get you started: http://www.inwebson.com/html5/custom...s-with-jquery/

[jeffocal]

Pullo
The player bar is only appearing in IE 10 with a mouse over. If possible could you please post the code that will make it appear when the page opens without having to move a mouse over it.

I spent some time reviewing the page you suggested but am having difficultly figuring out which one will accomplish that. I don't want to take the chance of messing up any of the progress we have made to this point

One more thing is there a way that we can overlay a clickable button in the start up screen indicating that there is a video there. Like the arrow in a circle that many videos on the web have.

[ralph.m]

is there a way that we can overlay a clickable button in the start up screen indicating that there is a video there. Like the arrow in a circle that many videos on the web have.

The easy way is to add it to the placeholder image.

[jeffocal]

But I have no idea how to do that

[Pullo]

Hi Jeff,

The only way that I am aware of to do what you want, is to customize your own set of video player controls (hence the link).
If this is not something you feel comfortable doing, why don't you use a plugin (as it appears that you are running WordPress).
Here's the plugin page: http://wordpress.org/extend/plugins/...for-wordpress/
Here's the project home page: http://videojs.com/

Hope that helps.

[jeffocal]

Pullo

I tried to using that plug in you mentioned however it did not solve the problem. I also tried several times to create a customized video player controller using the information on the web site you mentioned without success. (In most of my attempts the videos would not even load) We would appreciate it if you ro someone else could you post a script that we can add to the one we already have will that will display the basic video player controls on our web site.

We will be forever grateful

Jeff

[ralph.m]

But I have no idea how to do that

Open the default image in a program like Photoshop (there are free alternatives if you don't have it) and add an arrow image to it. You could create a circle, for example, and reduce its opacity. Then place a triangle icon over that (found in many system icon fonts). Resave the image with these additions, and the default image than looks like it has a Play button on it.

If you go with something like video.js, you wouldn't do this, of course, as I think it adds a button for you by itself (in a different way).

Personally, though, I wouldn't worry about the controls only being visible on hover. Users of IE will be used to that anyway. Having the simple arrow on the placeholder image would be enough to prompt people to hover over the video to play it.

[Pullo]

Is this the sort of thing you are after?
I don't have Win 7, so can't test on that, but it seems ok on IE in Win 8

[stuattpoul]

The video is working great in my browser dude...

[SpacePhoenix]

The video is working great in my browser dude...

For the benefit of the OP, what browser (and version) and version of windows did you use to test?

[stuattpoul]

For the benefit of the OP, what browser (and version) and version of windows did you use to test?

I am using Linux mint 4 OS and tested it with firefox 18.0 version.
thanks,

[jeffocal]

Is this the sort of thing you are after?
I don't have Win 7, so can't test on that, but it seems ok on IE in Win 8

Yes pullo that is exactly what I am looking for.

BTW My apologizes for the delay in responding I had a major computer melt down (our office were flooded)

We would appreciate it if you could you post the script you used to create it.

[ralph.m]

We would appreciate it if you could you post the script you used to create it.

You can actually just view the source code of the page and copy it holus-bolus.

[jeffocal]

Yes Pullo that is exactly what we are looking for.

We would like to thank all of you especially Pullo and Ralph for the efforts you have made on our behalf and will be forever grateful

[ralph.m]

It's really Pullo who had done the hard yards here. I've learned a lot too. Hopefully you have a clear way ahead now, but don't hesitate to ask more questions. Sorry to hear about the flood, too. That's no fun to deal with.

[Pullo]

Hi there,

So are we good or do I need to do something more?

I was also sorry to hear about the flood. These things suck (and make me glad I live on a hill).

[jeffocal]

I think we are good thanks again

Jeff