I have a problem with HTML5 Video and Google Chrome.
When I load my page. I can't see the video. No poster image, no video frame.
The video element does exist.
Now if I scroll a little bit the video is showing up and plays.
Its like "Please Scroll to Render and Play the Video"..
This is my code:
<video id="videocontainer" loop autoplay preload="auto" poster="http://homepage.de/video/poster.jpg">
<source src="http://homepage.de/video/BigWeb.mp4" type="video/mp4" />
<source src="http://homepage.de/video/BigWeb.webm" type="video/webm" />
<source src="http://homepage.de/video/BigWeb.ogv" type="video/ogg" />
<object id="videocontainer-object">
<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
<param name="flashvars" value="http://homepage.de/video/BigWeb.mp4&playButtonOverlay=false&loop=true&autoPlay=true&controlBarMode=none"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="videocontainer-embed" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="720" flashvars="src=http://homepage.de/video/BigWeb.mp4&controlBarMode=none&playButtonOverlay=false&loop=true&autoPlay=true"></embed>
</object>
</video>
Edit: I made something up on fiddle. http://jsbin.com/japewido/1/watch
When i use "controls" everything is ok on Google Chrome. Whithout controls. The Video is not starting. No Poster Image. Just a blank Video Element.
Edit 2nd: After Looking Up what the current vesion of google chrome is (34) and i saw that i was using google chrome 26 (the auto updater didnt work). I Installed the current version and it works now... (i want my time back^^)
<script>
var myVideo=document.getElementById("videocontainer");
myVideo.load();
</script>
try this
Related
Im building a site where video will be stream from mp4/m4v files on the server.
I am having trouble making this work in Chrome 47, evidently due to lack of NPAPI support.
Here are some variations of code I have tried and the results:
<video controls>
<param name="video" value="true" />
<source src="app/files/s1e1.m4v" type="video/mp4">
<source src="app/files/s1e1.m4v" type="video/ogg">
Your browser does not support the video tag.
</video>
Result: I get a javascript error frame with an message reading "This plugin is not supported"
<object width="100%" height="360">
<param name="movie" value="app/files/s1e1.m4v"/
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="100%" height="360" src="app/files/s1e1.m4v" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>
Result: The player renders and seems to load the file evidenced by the correct video length being displayed in the player, but video does not play when I hit the play button.
Either method works perfectly in Safari.
Which method is best for cross-browser support?
mp4 video is not playing and its showing red cross in Internet Explorer 9.
It is working fine in chrome
Problem is similar to question posted here:
HTML5 video plays in chrome but not IE9
But the solution is not clear
Please help! Thanks in advance
CODE:
<video width="520" height="540" controls="true" id="mp4Vid" >
Your browser does not support the video tag.
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=/mov/scene.mp4">
<source type="video/mp4" id="source" />
</video>
Source for video is loaded using following javascript code
var video1 = document.getElementById('mp4Vid');
var source = document.getElementById('source');
source.setAttribute('src', "myMp4.mp4");
source.setAttribute('type', 'video/mp4');
video1.pause();
video1.appendChild(source);
video1.load();
video1.play();
I am uploading .mp4, .webm, .ogv, .swf files to our servers for video playback. We are using the code below for cross-browser/fallbacks.
<video width="570" height="338" tabindex="0" loop="loop" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="/Resources/videos/product.mp4"></source>
<source type="video/webm" src="/Resources/videos/product.webmsd.webm"></source>
<source type="video/ogg" src="/Resources/videos/product.oggtheora.ogv"></source>
<object width="570" height="338" type="application/x-shockwave-flash" data="/Resources/videos/product.swf">
<param wmode="opaque" value="/Resources/videos/product.swf" name="movie">
<param value="false" name="allowFullScreen">
<param value="transparent" name="wmode">
<param value="config={'playlist':['http%3A%2F%2Fbeta.com',{'url':'http%3A%2F%2Fbeta.com%2FResources%2Fvideos%2Fproduct.mp4','autoPlay':false}]}" name="flashVars">
</object>
</video>
The videos work flawless in IE, Chrome, Firefox, and Safari (windows). However the video lags and is pixelated in Safari on Mac. See image below:
I am wondering if anyone has come across this issue before and could steer me in the right direction to fix it. Thank you all in advance.
I have integrated the medialement player. It works great on all browsers except firefox. As I am trying to integrate a mp4 video. I know that firefox does not support mp4, and hence setup a flash fallback. The flash fallback works, but it gets called twice. And I have 2 instances of the player getting played simultaneously. Any idea why would this happen?
The code:
<video id="player1" width="700" height="430">
<source type="video/mp4" src="'+videoUrl+'" />
<object width="700" height="430" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="/assets/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file="'+videoUrl+'" />
</object>
</video>
The videoUrl is submitted by the user. The user is given a prompt to paste the URL.
I am trying to use a video element for HTML5 video and a nested element for Flash fallback. I have seen code using flowplayer to fallback to flash - but their documentation only shows a javascript interface. Is there any way to do something like what is below? To test, I remove the two lines with "source src="... "
If I have to use javascript for the flash, how would I code it in line with HTML5?
Thanks!
<video id="movie" width="640" height="360" preload controls>
<source src="./videos/fiddler-tradition.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="./videos/fiddler-tradition.mp4" />
<object id="flowplayer" width="640" height="360"
data="./flowplayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"./videos/fiddler-tradition.flv"}' />
</object>
</video>
The above non java flowplayer code (the code within the object tag) works fine when outside the video tags. I realize my issue is testing the fallback without html5 on my localhost machine while all I have available is an html5 browser. I will upload to the web and try on another pc with an older browser.
UPDATE: All is working - Testing in IE7, the code falls back to flash player. Yeah!