Jump to content

html5 <video></video>


Recommended Posts

I don't ubderstand why this example works in my browser: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop


But this in my own web page does not - I just get a big blank space:

	<div style="text-align:center">   		<button onclick="playPause()">Play/Pause</button>   		<br>   		<video id="RockyOnSlide" width="560">    		<source src="RockyOnSlide.mp4" type="video/mp4">		    Your browser does not support HTML5 video.  		</video>	</div> 	<script> 		var myVideo = document.getElementById("RockyOnSlide"); 		function playPause() 		{     		if (myVideo.paused)         		myVideo.play();     		else         		myVideo.pause(); 		} 	</script> 

The mp4 in question exists and I can do a hyperlink to it.

Link to comment
Share on other sites

Each browser supports different video formats. Support for MP4 isn't too great yet: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats


You should have another <source> element with an OGG file for browsers that don't support MP4.

Link to comment
Share on other sites

  • 5 weeks later...

Hi, I wanted to create a new topic but I think I will use this.


I have some troubles with my video expand codes:


<video id="myVideo"
onmouseover="this.src='1080x720.webm';" onmouseout="this.src='300x600.webm';" border="0" onclick="VideoControl()" controls autoplay>
<source src="300x600.mp4" type="video/mp4">
<source src="300x600.webm" type="video/webm">
<source src="300x600.ogv" type="video/ogg">
Your Browser does not support the video tag
As you can see, my page loads a video (300x600), when the mouse is over the video a new video will appear(1080x720), and when the mouse is out the 300x600 comes back, but here are my problems:
-When I run with Chrome, there's no 300x600, there's just the sound, but the onmouseover works and the onmouseout too, why it doesn't work at the beginning?
-When I run with Firefox, the 300x600 at the beginning works but not the onmouseover, I have to reload(or F5) to make it work, why?
And I have other questions:
-I want to make all formats video for the 1080x720, well I mean, is it possible to do something like this?
onmouseover="this.src='1080x720.webm'; this.src='1080x720.mp4'; this.src='1080x720.ogg';"
Or there's another way to do this?
-I would like that 1080x720 begins at the same time 300x600, so when the mouse is over the 300x600, the 1080x720 will appear but not at the beginning, is it possible?
-Concerning the onmouseover and onmouseout, i'd like to make something like a load-timer/animation, so when the user pass his mouse over the video, he thinks that the video will get 'bigger', more like a transition, is it possible to do something like this?
Link to comment
Share on other sites

What's happening is that when you mouseover the video you're giving it one specific file to use, which might be of a file type that the browser is not compatible with.


The second problem is that when you mouseover, the file you're changing it to has to be loaded from scratch and it will start from the beginning. There's no real solution for this. You can't have two videos playing at the same time or the sound will overlap and they'll likely desynchronize after a while due to different streaming speeds.


My suggestion is to only load the large video and just change the width and height of the container using Javascript.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...