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.
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?
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
I'm pretty sure this is a path issue but it's killing me, i cannot figure out the correct path to find the video. When I run this on my local machine it works just fine. When I run this server side in Chrome it works just fine. FF and IE however come back with "Cannot find this video".
Thanks!
<td width="225"><video controls poster="Approving.jpg" width="200" height="200" preload controls>
<source src="Approving.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="NonverBlaster.swf"
width="225" height="129">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=Approving.mp4">
<!--[if IE]><param name="movie" value="NonverBlaster.swf"><![endif]-->
<img src="Approving.jpg" width="854" height="480" alt="Video">
<p>Your browser can’t play HTML5 video. <a href="video.webm">
Download it</a> instead.</p>
</object>
</video></td>
This is the quintessential example of what happens when you walk away for a day and come back.
What was happening is I was browsing the HTML file through windows explorer instead of using IE/FF to go to IP/Port/index.HTML of the actual HTML.
Interestingly chrome know to look on the local server for the file.
Why does Chrome keep attempting to mount mp4 files when it can't play them?
I am working on a PC Windows 7, IE 10, Chrome Version 25.0.1364.172.
It doesn't matter whether mp4 source line is before or after the object lines, Chrome seems to want to mount the mp4 files even if it can't play them.
I would like to play the mp4 file in IE 10 and the flash equivalent in Chrome, but I can't seem to make any combination of line ordering work.
So far, my only workaround is to use flash in both browsers. But why do I have to? I thought the html5 video tag was supported by both browsers?
Is this the correct way for a flash fallback to be coded, as it doesn't seem to be working. Is there a way to code this so I don't have to use flash in IE 10, which can play the mp4 files native?
Thanks for whatever assistance you can give me.
Here's a copy of the code generated at http://sandbox.thewikies.com/vfe-generator/
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="Mark.jpg" width="640" height="480">
<source src="Mark.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="640" height="360">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image=Mark.jpg&file=Mark.mp4" />
<img alt="Mark" src="Mark.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
</object>
</video>
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!