boylesg Posted October 19, 2014 Share Posted October 19, 2014 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 More sharing options...
niche Posted October 19, 2014 Share Posted October 19, 2014 (edited) where on your hard drive? Edited October 19, 2014 by niche Link to comment Share on other sites More sharing options...
Ingolme Posted October 19, 2014 Share Posted October 19, 2014 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 More sharing options...
niche Posted October 19, 2014 Share Posted October 19, 2014 Though he said it worked in his browser in the OP. Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2014 Share Posted October 20, 2014 Though he said it worked in his browser in the OP. The W3Schools example has multiple different formats while his code only had one file. 1 Link to comment Share on other sites More sharing options...
niche Posted October 20, 2014 Share Posted October 20, 2014 I'll look into that. Thanks fox. Link to comment Share on other sites More sharing options...
Didjo Posted November 18, 2014 Share Posted November 18, 2014 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 comment Share on other sites More sharing options...
Ingolme Posted November 18, 2014 Share Posted November 18, 2014 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 More sharing options...
Didjo Posted November 18, 2014 Share Posted November 18, 2014 Thanks for your answer, about your suggestion I have already thought about it, but change the width and height will also change the quality and resize? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now