How to play a video file in a sub folder using flowplayer? - html

When using flowplayer to show videos on Opera browser, The videos were played fine if they were in the same folder as the page using this code.
<video controls width="704" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.webm" type="video/webm">
<object id="flowplayer" width="704" height="400"
data="FlashPlayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="FlashPlayer/flowplayer-3.2.16.swf" />
<param name="flashvars" value='config={"clip":"beach.mp4"}' />
</object>
</video>
However, when I moved them to a sub folder called Videos, and used the following code:
<video controls width="704" height="400">
<source src="beach.mp4" type="video/mp4">
<source src="beach.webm" type="video/webm">
<object id="flowplayer" width="704" height="400"
data="FlashPlayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="FlashPlayer/flowplayer-3.2.16.swf" />
<param name="flashvars" value='config={"clip":"Videos/beach.mp4"}' />
</object>
</video>
Nothing was played at all. So could you please show me how to pass a video path to flowplayer.
Thank you.

I think it should change in src
<video controls width="704" height="400">
<source src="Videos/beach.mp4" type="video/mp4">
<source src="Videos/beach.webm" type="video/webm">
<object id="flowplayer" width="704" height="400"
data="FlashPlayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="FlashPlayer/flowplayer-3.2.16.swf" />
<param name="flashvars" value='config={"clip":"Videos/beach.mp4"}' />
</object>
</video>

Related

Video tag on Chrome: Fixed Frame

i got a problem with a website and the HTML5 tag video on Chrome.
It works perfectly on the other browsers, but in Chrome, the video doesn't start.
It's fixed o the first frame.
This is the source code:
<video id="Video1" loop="loop" autobuffer="autobuffer" preload="preload" autoplay="autoplay">
<source src="video/video.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
</object>
</video>
And here is the link of the website: http://www.vitalegiuseppe.it/
Anyone have some ideas? Thanks!

can't view video in Internet Explorer

In the below code i can view video in mozilla and chrome
but i can't view video in Internet Explorer.
may i know what is problem with my code:
<video width="400" height="360" autoplay="autoplay" loop>
<source src="Tryteksolutions_captcha-work_from_home.mp4" type="video/mp4" />
<source src="Tryteksolutions_captcha-work_from_home.ogv" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="Tryteksolutions_captcha_work_from_home.swf">
<param name="movie" value="Tryteksolutions_captcha_work_from_home.swf" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=Tryteksolutions_captcha-work_from_home.mp4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>

Safari HTML Video not displaying correctly (too small)

Hey I am working with HTML tags and when I open the page in Safari the video player is very small.
If I enable full screen and then go back it is focused correctly.
I am not sure what is causing it to load incorrectly initially.
HTML Code:
<div id="AboutVideo">
<video width="100%" height="100%" controls>
<source src="../Media/Video/Intro/test.mp4" type="video/mp4" />
<source src="../Media/Video/Intro/test.ogv" type="video/ogg" />
<source src="../Media/Video/Intro/test.webm" type="video/webm">
</video>
</div>
About Video:
#AboutVideo
{
float: left;
margin-right: 1em;
}
Any help would be great.
PLease try this below code, It may be because of video fallback code you never included. thats it.
<video controls="controls" autoplay="autoplay"
poster="#" width="212" height="160">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="212" height="160">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>

HTML5 video controls - Cannot play after pause in chrome only

Hiya I was hoping for some help if possible please. I have an HTML5 video that is acting strange when viewed in chrome.
When the user hits play for the first time, the video plays.
If they click pause the video pauses. But then the play button doesn't work at all and the only way to make the video play is to click the video screen.
Any ideas on why this is happening and how i can fix this issue please?
Here's the code I'm using:
<video width="560" height="320" preload controls>
<source src="videos/Testimonial2.mp4" type="video/mp4" />
<source src="videos/Testimonial2.ogv" type="video/ogg" />
<source src="videos/Testimonial2.webm" "type=video/webm" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="320">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=videos/Testimonial2.flv&autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
Thank You :)
Unfortunately for me, Slashin8r's answer didn't help me, but this answer did. Basically, I just had to rearrange my sources so that the OGV and WEBM videos came before the MP4. Don't know why. I left preload="none" on, too. Seems silly, but hey, whatever works, right?
BEFORE:
<video width="1920" height="1080" controls preload="none">
<source src="example.mp4" type="video/mp4" />
<source src="example.ogv" type="video/ogg" />
<source src="example.webm" type="video/webm" />
</video>
AFTER:
<video width="1920" height="1080" controls preload="none">
<source src="example.ogv" type="video/ogg" />
<source src="example.webm" type="video/webm" />
<source src="example.mp4" type="video/mp4" />
</video>

Safari showing HTML5 video controls and playing audio, but not showing video?

Safari 5.1.7 on XP was displaying HTML5 video yesterday. Today it only displays audio and the controls. I refuse to believe Safari has a mind of its own displaying elements on random.
For the reference, website URL is: http://onelove-themovie.co.uk/
<div id="trailer">
<img id="close" src="images/close.png" alt="close" />
<div id="video">
<video controls autoplay="autoplay" poster="video/trailer.jpg" width="600" onclick="if(/Android/.test(navigator.userAgent))this.play();">
<source src="video/trailer.mp4" type="video/mp4" />
<source src="video/trailer.webm" type="video/webm" />
<source src="video/trailer.ogv" type="video/ogg" />
<embed src="video/flashfox.swf" width="600" height="480" flashVars="autoplay=true&controls=true&loop=true&src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
</video>
</div>
</div>