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 post
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 post
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:

 

<body>
<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
</video>
[...]
</body>
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?
Thanks
Link to post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...