I'm working on Vue (Laravel) I need to set a different file depending on the browser. I have 2 different video files and a GIF file and I need to set them for different Browsers.
This is my code for the videos (to set only for Chrome and Mozilla):
<video class="img-fluid" width="500px" height="438px" autoplay muted playsinline>
<source src="/image/animation.mp4" type="video/mp4">
<source src="/image/animation.webm" type="video/webm">
</video>
This is my code for the gif (to set only for Safari):
<img height="500px" width="438px" class="img-fluid" src="/image/animation.gif">
Any idea?
Related
I have a website with a background video. Many browsers especially mobile ones dont support autoplay even with muted videos. How can i detect if the browser isnt supporting autoplay and replace the video with an image. Im using vueJS.
<video autoplay class="background-video" loop muted> <source src="#/assets/video/background.mp4" type="video/mp4"> </video>
Use the poster attribute:
<video width="620" loop muted poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi">
</video>
source
Example with no video
Add the playsinline attribute for your video to autoplay on iOS.
(Most browsers support autoplay, as long as you also use muted.)
I am a newbie at web development, my question is, as I understand this code below, it will open the Chrome Video Player, which also has a download button which can download the video.
How can I get the real url for the video which end in an extension of mp4?
<video loop muted playsinline autoplay="autoplay" preload width="640" height="360">
<source src="https://r4---sn-nv47lney.googlevideo.com/videoplayback?lmt=1517456704789231&key=cms1&dur=386.240&ipbits=0&requiressl=yes&mime=video%2Fmp4&source=youtube&pl=20&itag=18&ei=hudyXP-4OIXlwQHBsaOwAw&gir=yes&expire=1551055847&ratebypass=yes&c=WEB&fvip=4&id=o-AHZWBPA4mUtFjI305r97oXdDZELtWbNS5dJeuwGAqirn&clen=23249888&ip=2600%3A3c00%3A%3Af03c%3A91ff%3Afe52%3Af0d3&sparams=clen,dur,ei,expire,gir,id,ip,ipbits,ipbypass,itag,lmt,mime,mip,mm,mn,ms,mv,pl,ratebypass,requiressl,source&signature=41173E731E2CFF1D3BB61936B8A78716C9515442.358D2657A715DA85E175DB497BC6D211489DA79E&title=Very+Powerful+Motivational+Video+For+Medical+Students.+Goosebumps+Guaranteed!!!&redirect_counter=1&rm=sn-q4fels76&req_id=4c1bf6c1b1eb36e2&cms_redirect=yes&ipbypass=yes&mip=192.123.1.4&mm=31&mn=sn-nv47lney&ms=au&mt=1551034152&mv=m#t=0.9" type="video/mp4" />
</video>
Hiii Everyone,
In my project.I tried with html5 video tag.Below is the code
HTML code
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="">
<source src="img/main.mp4" type="video/mp4">
</video>
it will be play continously in my website.This video is not playing in safari browser.For that i tried in some other way with embed.It is playing in safari
<embed src="img/main.mp4" width="100%" height="" autoplay loop muted id="v" >
</embed>
But what the issue is while i tried with video tag it is like below picture.
After tried with embed tag it is like
What is the issue is when trying with video its is compatible with full width and height of desktop and in embed it showing in very small size and it is not playing continously.If anyone knows the solution of my problem.Please help me to get out of this issue.Thanks in advance.
You should add controls="true" for the tag.
tag can not autoplay in iOS safari browser, and the default appearance is without controls has no play button.
If you don't want to use the default controls, you can create your control bar instead. Using methods of , such as .play() .pause(), to control the video.
it needs height add style="min-height:300px"
<video autoplay loop muted poster="screenshot.jpg" id="v" width="100%" height="" style="min-height:300px">
<source src="img/main.mp4" type="video/mp4">
</video>
you should also try height attribute in embedding. I hope it will solve your problem
<embed src="img/main.mp4" width="100%" height="auto" autoplay loop muted id="v" >
I have a video tag thats for playing a mov file, its working in Safari but not on chrome, what I need to set to make it playable in chrome too?
<video class="vp" width="480" height="320" controls="controls">
<source src="One.mov" type="video/mp4">
<source src="One.mov" type="video/ogg">
Your browser does not support the video tag.
</video>
As mentioned by Harshith you're probably using a file type which the browser doesn't support.
Use a range of file types to ensure maximum compatibility, I see you are using 2 source tags in the example but only 1 file type.
I would recommend using Ogg & H.264 as these should cover the main browsers (excepting older versions) and then any additional file types as required depending on the browsers used by your audience.
Also, you may want to consider adding the old embed method for browsers which don't support HTML5 such as IE8 and lower. If you nest the 2 methods as below the browser will use the embed option only if it does not support HTML5.
<video>
<source src="#" type="#" />
<source src="#" type="#" />
<source src="#" type="#" />
<object data="#">
<embed src="#">
</embed>
</object>
</video>
Or you could just use YouTube...
I have used HTML5 for displaying a video. My code is
<video tabindex="0" autobuffer="" poster="" height="380" width="600">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogg" type="video/ogg">
<img alt="Film Poster" src="" height="380" width="600">
</video>
But this is not displaying in safari browser...
What is the problem?
Try changing the .ogg file extension to .ogv (both actual file and in the html sources)
Take a look at some of the answers here