Trying to get a simple video to play on main page of website. I've included all three types of videos, and it works just fine on Chrome, Firefox, and Opera. But no Safari.
Website can be seen here:
outoftheboxtechnology.appspot.com
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="/assets/media/six-points.webm" type="video/webm">
<source src="/assets/media/six-points.mp4" type="video/mp4">
<source src="/assets/media/six-points.ogg" type="video/ogg">
</video>
You need Safari 4.0 to make the <video> tag to work. Perhaps you can put a notice on your website for your users. Once you meet that condition:
Make sure your src (in your case /assets/media/six-points.webm etc) is valid and the source exists.
Make sure you
open the Web Inspector in your Safari and check if the tag is
properly placed in the DOM.
Example:
<section>
<video id="my-video" playsinline class="video" muted loop autoPlay width="100%">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</section>
Safari 3.1+ supports it (Desktop).
Try this syntax
<video src="http://example.com/path/mymovie.mp4" controls></video>
Source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
Related
I have got stuck using a video tag in different browsers. In Chrome, this works perfect (video shows image and audio).
<video #myvideo [src]="urlvideo" height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline">
However, in Firefox it is not possible to hear the video (shows only image, controls show muted and disabled audio button). Also, in Opera it is not possible to view the video (can hear audio only, controls are visible).
Using source tag, adding or removing the optional attributes, it behaves the same way:
<video height="300" style="width: 100%;" controls autobuffer autoplay playsinline webkit-playsinline="webkit-playsinline" onloadedmetadata="this.muted = false">
<source [src]="urlvideo" type="video/mp4">
</video>
More info: Tried on Ubuntu and Windows, and the results are the same. Browsers DevTools does not show any incompatibility warning or error.
I guess I am missing something, do you know what could it be or have any advice? Thanks in advance.
Though mp4 should work across all browser I advise you to check other version too. Use below code that need other variation of videos.
<video width="100%" height="300" controls="controls">
<source src="media/intro.mp4" type="video/mp4"/>
<source src="media/intro.ogv" type="video/ogg"/>
<source src="media/intro.webm" type="video/webm"/>
</video>
the video working fine in all other devices and android but not even display in Safari , iPhone and iPad, i use all tags like playsinline and playsnline in camel case, but till facing problem and if i upload video on any server and used the url like: https://video.mp4 then it works fine. but static video like: video.mp4 not play even not show, only display a blank page here is my code:
<video width="100%" autoplay muted loop playsInline>
<source src="cuted_preview.mp4" type="video/mp4">
</video>
<video width="100%" autoplay muted loop playsinline>
<source src="cuted_preview.mp4" type="video/mp4">
</video>
I have added a code for playing video as a banner but facing one problem in that is whenever the video is completed getting a black screen for a moment and again the video is playing.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>
I have tested this in all the browser. Please take a look to the attributes in this tag and this will also work in your case.
<video width="400" controls playsinline loop muted >
<source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
UPDATE: newer versions of mobile phone browsers on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel. :-)
For more details on the UPDATE section read this:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I've amended your tag a little to include autoplay loop instead of autoplay="true" loop="loop".
I also think you've just got your HTML syntax a little wrong - instead of putting the source in a <source> tag, you should include a src="" within the <video> tag like so:
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>
As you can see there's no black screen at the end of this looping video. If it is still happening on for you with your own material, it might actually be your video that has a slight gap at the end?
Here is my html for making my video autoplay and loop with no problems. Give this a try.
<video muted autoplay loop>
<source src="" type="video/mp4" />
</video>
I've got the following code for a HTML5 video, which works fine in all browsers except Chrome:
<video id="video-03" preload controls poster="/images/videos/testing.jpg" width="480" height="854">
<source src="/images/videos/testing.mp4" type="video/mp4">
<source src="/images/videos/testing.webm" type="video/webm">
<source src="/images/videos/testing.ogv" type="video/ogg">
</video>
I don't want autoplay turned on.
The only way I can get this to work in Chrome, is if autoplay is turned on, but still no controls to stop/start it show.
Any ideas why Chrome isn't showing the controls? Even if I right click on the video it has a tick next to "Show Controls". So Chrome thinks they're displaying, but there's nothing there.
Where are you stuck ?
look this below code it shows all controls, maybe you have another problem in your System.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
I have a webm video running on my site which is not working on safari and IE.
The code I have used is as
<video src="http://video.webmfiles.org/elephants-dream.webm" controls autoplay loop preload="auto" poster="http://my-site.com/images/home-banner.png" class="only-default" width="613" height="354">
<source type='video/webm; codecs="vp8, vorbis"' src="http://video.webmfiles.org/elephants-dream.webm">
</video>
WebM is not supported in IE and Safari
More info here http://www.w3schools.com/tags/tag_video.asp
Safari and IE9 require MPEG-4. You can include a second source tag for that.
You should remove the src= attribute inside your video tag when you use source tags.
If you need it to work on IE8 or lower, you can add a Flash player inside the video tag that will play the same mp4 file.
<video controls autoplay loop preload="auto" poster="http://my-site.com/images/home-banner.png" class="only-default" width="613" height="354">
<source type='video/mp4;' src="video.mp4">
<source type='video/webm;' src="video.webm">
</video>