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

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>

Related

Why is my video code not working in Internet Explorer and Safari?

Why isn't this working in Internet Explorer and Safari?
<video loop autoplay controls muted="" width="100%" height="auto">
<source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.mp4" type="video/mp4" />
<source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.webm" type="video/webm" />
</video>

html5 video background safari and Windows Phonenot found

i want a video background in my new landing page, the video background is fine in Chrome, Firefox, Opera and IE, but not in Safary and Windows Phone.
This is my code:
<video autoplay loop id="video-background" muted>
<source src="video/video.ogg" type="video/ogg" />
<source src="video/video.webm" type="video/webm" />
<source src="video/video.mp4" type="video/mp4" />
</video>
Does Safari needed other video format?
Thanks for the help !

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>

html5 video plays on Firefox, Chome, IE10 but not on Opera or Safari

The following play the video on Firefox, Chrome and IE10, IE9 but not on Opera or Safari (and not IE8 but that is not really a problem) on Windows 8. The files are hosted on IIS. The mimetype set for mp4 is: video/mp4.
How do I get Opera and Safari play this?
<video id='movie' controls autoplay ><!--video ist html5-->
<source src='heiraten.mp4' /><!-- Quelle mp4-->
<!--
alle nicht HTML5 fähige Browser (IE8) machen hier weiter,
mit flash, heiraten.swf ladet .f4v film
und SkinOverPlayStopSeekMutVol.swf als controls
-->
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360">
<param name="movie" value="heiraten.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="heiraten.swf" width="640" height="360">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
You don't need Flash/swf.
Try it with the html5 Video Tag and use mp4 and ogg.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
http://www.w3schools.com/tags/tag_video.asp
Thanks to "jop" for the note *.webm
I guess with this 3 formats the most Browsers will play your movie.

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>