1 person found this helpful
Remove "AUTOPLAY" from your controls.
NOTE: you need 3 file types to support the various browsers & devices.
- MP4 or M4V for web
Use Miro Video Converter
Below is what your HTML code should look like. Change yourvideo to your actual path and file name.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 with Video</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <!--begin video--> <video controls> <source src="yourvideo.mp4" type="video/mp4"> <source src="yourvideo.webm" type="video/webm"> <source src="yourvideo.ogv" type="video/ogg"> NOTE: If you see this, you're using an outdated browser that doesn't support the video tag. </video> <!--end video--> </body> </html>
Thank you Nancy
This is what I have.
I got a slider in which I want to put the video.
Here is what is inside this slider;
<div class="tp-caption fade"
data-easing="easeInOutExpo" ><iframe src='http://player.vimeo.com/video/7449107?title=0&byline=0&portrait=0' width='520' height='300' style='width:520px;height:300px;'></iframe></div>
In the iframe is where I want to put the video.
Now, if I copy/paste your code, still it started as soon as I test/load the page.
Thanks a lot for ALL YOUR YOUR HELP
That's not HTML5 video. That's Vimeo. Not the same thing at all.
You can set the embed variables on Vimeo's site.
When previewing in browsers, be sure to clear your browser's cache with F5 or Ctrl+R.
Nancy, this is a video (The Vimeo video) is just a place holder.
The video that I have and want to put there is a mp4
You're mixing Apples with Oranges. HTML5 video doesn't need an iframe. It's actually better if you don't use one. Videos from sharing sites like Vimeo and YouTube are totally different & not a worthy substitute for testing purposes.
Can you show us a link to your test page so far.
1 person found this helpful
Some companies will not allow any content from YouTube or Vimeo to be played in their browsers, because they figure that, if you are watching YouTube or Vimeo videos, you're not working.
In this case, the only decent solution is to host the video on your server. While Flash is a viable method, it will never play on mobile devices. Additionally, many modern browsers don't have the Flash plugin. So the right solution is to use HTML5 and host it yourself.
Now, Nancy likes PicklePlayer: http://www.pickleplayer.com/
You need to purchase it in order to make it work for your website, but it will absolutely work with 100% of the browsers out there.
The other (and free) way to deal with this is to transcode your video into:
And to call whichever will work with the client browser. Additionally, you have to include the MIME types that your server may not understand (usually OGG Theora).
Here is how to do HTML5 video in your web page:
<video width="640" height="480" controls preload="metadata" poster="path-to/your-poster.jpg">
<source src="path-to/your-movie.mp4" type='video/mp4; codecs="avc1.42E01E, H.264"'>
<source src="path-to/your-movie.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="path-to/your-movie.webm" type='video/webm; codecs="vp8, vorbis"'>
Now, please understand, this presupposes that the video is standard 640x480 video and not high-def or 16:9 widescreen. You would make the dimensions match what the video size really is. You can make the poster out of anything, a frame from the movie or something else entirely.
Here is a link to a page that does what I am describing here:
Go down to the bottom of the page and you'll see the video. Look at the sourcecode in your browser and see how it works.
Now, with respect to MIME types. If you have a Linux/Apache server, you may need to edit your .htaccess file thusly:
Download .htaccess, which should be in your root folder for your website (if not, create one) and add these lines:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
If you are on a Windows Server, you may have to use your control panel to do this. Also, many Linux/Apache servers have a control panel option for adding MIME types.
OK, give me 10 mins :-)
In the meantime, I found a set of test files to use instead of Vimeo.
Drop this code inside your slider without any iframe and it should work.
<!--begin video--> <video controls > <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> NOTE: If you see this, you're using an outdated browser that doesn't support the video tag. </video> <!--end video-->
It looks to me that you have created the following for video in your web page:
<div src='images/assets/lp_out.mp4' width='520' height='300' style='width:520px;height:300px;'><video controls></video></div>
And your beginning declaration is not HTML5, but a mix of HTML5 and XHTML:
<!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><!--<![endif]-->
For HTML5 (and to make video work) you need the following:
This works, but I cannot see the controls bar, plus the video is 'push out' to the bottom.
"<!--begin video--> <video controls >
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> NOTE: If you see this, you're using an outdated browser that doesn't support the video tag. </video> <!--end video-->
You did not upload the video to your page and you did not upload the changes in your page for us to see what is happening. Please let us know when you have done that.
Ok, I just did upload the new file and video.
Now, I can see the controls, but no video . . . it's getting close
Thanks to all for all your help.
i have big problem this look web site :
1 person found this helpful
OK, here is what I see:
<video controls >
<div><source src="images/assets/lp_out.webm" type="video/webm">
<source src="images/assets/lp_out.ogv" type="video/ogg">
<source src="images/assets/lp_out.mp4" type="video/mp4"></div>
NOTE: If you see this, you're using an
outdated browser that doesn't support
the video tag. </video>
Can you tell me why you have the div there?
If you are trying to wrap the video in a div tag, wouldn't it be:
<video controls preload="metadata" poster="path-to/your-poster.jpg">
<source src="images/assets/lp_out.mp4" type='video/mp4; codecs="avc1.42E01E, H.264"'>
<source src="images/assets/lp_out.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="images/assets/lp_out.webm" type='video/webm; codecs="vp8, vorbis"'>
NOTE: If you see this, you're using an outdated browser that doesn't support the video tag.
And please understand that the order of which you offer the browser is very important. You need to do .mp4 (or .m4v) first, then .ogg, then .webm. Do not mix that order up, else some browsers will display the video and others simply won't.
Last, but not least, you have not fixed your doctype as I recommended above. So your web page is still not HTML5.
"Can you tell me why you have the div there?"
To hold just the video in place.
I just change the order of the video, but still don't work, or at least on my end
1 person found this helpful
You need to follow what I gave you.
To hold the video there, you can create a div container that will style the video and put it where you want it.
I have given you the correct HTML code for that and in the correct order.
In your Stylesheet, you can place the video where you want it by creating styles:
margin-top: 95 px;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
This will cause the video to transition in like you want it to. You can even create a framed border.
First, thanks a lot to Nancy, Mark,
Now, let me tell you that I'm going nuts
Well, i decide to put/insert the video in another page.
(this web is a template, by the way)
so here it is.
Now, I can see the video, it doesn't started by itself, but . . . well, you can see what it's going on now.
. . . getting ready to give up . . . but not yet
How can I make it smaller?
This is a responsive site, so I'm not sure what else to do.
Thanks again to you.
You will need to add to your style rule for the video the height and width properties in px, or becuase it is a responsive site, in %. You should also add the height and width attributes to the video tag:
<video width="320" height="240" controls>
This will fix the size of the video container and the video itself to whatever you wish.
I would also recommend you create the video to be the exact maximum size the video will appear in your site (ie, dont upload a video of 1080px that will only appear 320px) so that users dont have to download a large file size that will render much smaller.
Not sure why if I put the video inside a iFrame, it will keep the shape.
Mark and Nancy will "chew' my but for useing it, but it's the only
--at least now- for me to keep it in place.
Now, the only thing it's to be able to see it in Google and in explorer,
plus make it NOT to star or autoplay.
Thanks a lot . . .i'm going to sleep
Well here is an update on my problem
In Explorer 9, the video can be seeing, but the sizes go berserk
In Safari 5.1.7 I got a error message that say;
"webkit2webprocess.exe has stopped working "
Google Chrome it's good (start by itself, but keep the size)
Firefox same as Google
Well, let's see if I can improve this thing that it's making my life so interesting . ..
Can I email you a private question?
Please let me know how to contact you, if you agree.
No problem at all. - you can send a pm from this forum