Chrome says "This plugin isn't supported" even though I have both video formats. Strangely I can play HTML5 video on other websites (with the same computer/browser). I looked at the source and they have mp4 first then webm.
I tested the site with chrome from another computer and it works fine. Chrome is at the latest version on both computers.
Here is my code:
<video preload="auto" autoplay loop>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
<video preload="auto" autoplay loop muted>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
Add the muted attribute to the <video> tag.
As you explain your issue...Please check with your 'Chrome extension' in setting, it might be possible that you have any extension which is creating problem in playing the video.
Please try to stop all extensions and then try to run the page again. Hope it will work.
Related
i want to add a loop video on my react-app.
I did it like this
<video
ref={videoRef}
playsInline
autoPlay
muted
loop>
<source src={Video} type='video/mp4' />
</video>
it's working fine on Chrome/Firefox on mobile and on desktop.
But it's not playing on iPhone (Safari).
It is playing locally but when i deploy it. it's not playing :(
I had a similar kind of requirement with my previous project, the following code is working fine, from this we will have a muted video running in loop with autoplay.
<video width="300px" height="500px" autoplay="autoplay" muted loop>
<source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
</video>
This is so because, according to the apple documentation, a video only plays automatically if:
it contains the playsinline attribute, and
it has no audio track present OR it contains the muted attribute.
So I'd suggest you include the playsinline attribute. Learn more on inline playback here.
I created a sandbox and deployed but was unable to reproduce your issue on iOS 15.2 (iPhone 12), it autoplays and loops as expected. Could please add more details?
I have converted the video into 3 formats such as .mp4, .webm, .gov But still background video is not playing in safari browser
<video autoplay="" muted="" loop="" id="myVideo">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/ogv">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).webm" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
page url is http://gnxtsystems.com/cookie-test/
Please help me to fix it. Thanks in advance.
Try these two things..
add playsinline attribute in video tag like this
<video class="video-background" autoplay loop muted playsinline>
and secondly for apple devices you will have to turn off the low power mode.
then check...it will work
It's quite simple if you are using it in React. You just need to enable it to play inline and disable "picture in picture" feature.
<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">
It might be because of the mime type. Try only mp4 file. And for some reason, videos would not play on iPad unless I set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
And this now works on both iPad and iPhone:
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
you need to use a poster attribute according to standards and must not load the video background on mobile devices. Then a ogv is a webm format so you'll need to use:
<video autoplay="" muted="" loop="" id="myVideo" poster="image.jpg">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
No need to load webm as you'll load ogv and only if it's not possible to load ogv it will load mp4. The poster attribute is used since the video loads and should be used on mobile devices as background without loading the video according to mobile-first design to not waste visitor's data and to get a benefit on load time.
EDIT:
And try to use always names without spaces when working on web:
videos/2.0-Welcome-to-DISTRO_1 (1).ogv
should be:
videos/2.0-Welcome-to-DISTRO_1_1.ogv
Here is a working example that you can inspect:
http://joelbonetr.com/
You can try WEBM formate, hope it helps!
<source src="<?php echo the_sub_field('banner_background_video_webm');?>" type="video/webm">
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?
Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.
Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.
Build an HTML5 video as usual:
<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
<source src="aurora.webm" type="video/webm"> </source>
<source src="aurora.mp4" type="video/mp4"> </source>
</video>
If previous advise does not help, try to use scripted playback examples video.js and simpl on Github.
Also, read this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos.
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
...Update: It seems there's an issue with playing Webm files with iOS
Chrome.
The simplest and best fix is to make sure you declare the mp4 file first and then declare webm in second place (the reverse of your shown order). I believe iOS expects an mp4 as first file in HTML5 video tags. All iOS sees is src="sample.webm" which is not a valid expected MPEG codec so leads to your "...play button that doesn't trigger anything". You got a silent error somewhere.
Try :
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/mp4" src="sample.mp4"></source>
<source type="video/webm" src="sample.webm"></source>
</video>
Side note: Just my opinion but, I think having webm here is redundant since the main supporting system (Google-based tech) can already handle mp4 anyways.
Better to offer those video decoders in browsers [of end-users] a choice of mp4 or ogv (just in case of Firefox).
PS: Auto-play is disabled on most mobile systems due to SIM data allowances. The end-user must choose to play that video. Likely there are clever workarounds on the net, just remember though, this is expected behaviour so is not an issue with your current code.
I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls
I have a video player in HTML5, pretty simple.
<video width="470" height="265" preload="none" controls="controls" id="video_player" poster="assets/posters/finished_jk.jpg">
<source type="video/webm" src="assets/videos/finished_jk.webm"></source>
<source type="video/ogg" src="assets/videos/finished_jk.ogv"></source>
<source type="video/mp4" src="assets/videos/finished_jk.mp4"></source>
Your browser doesn't support videos
</video>
I have an issue with Firefox. When I click the play button, it's going directly to the end of the video.
It works with Chrome, Safari and Opera.
Thanks
The problem came from the encoder software I used.
I used "Miro Video Converter" to convert my mp4 video in webm format. I tried with another one and it works fine.