On my webpage there is only a video. It is playing well on Edge but not on Mobile Device and Chrome.
the video is .mp4
autoplay is disabled
I am using OceanWP theme but I tried also Astra theme without any success
I am using Elementor to edit the page
There are many questions on this topic but none of them has a solution that fixes my problem.
EDIT
From the official Apple WebKit documentation (iOS):
Starting in iOS 10, WebKit relaxes its inline and autoplay policies to
make these presentations possible, but still keeps in mind sites’
bandwidth and users’ batteries.
By default, WebKit will have the following policies:
video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.
https://webkit.org/blog/6784/new-video-policies-for-ios/
As for Mobile Chrome (Android):
Muted autoplay for video is supported by Chrome for Android as of
version 53. Playback will start automatically for a video element once
it comes into view if both autoplay and muted are set, and playback of
muted videos can be initiated progamatically with play(). Previously,
playback on mobile had to be initiated by a user gesture, regardless
of the muted state.
https://developers.google.com/web/updates/2016/07/autoplay
Example:
<video id="myVideo"muted defaultMuted autoplay playsinline controls>
<source src="myVideo.mp4" type="video/mp4">
</video>
Your video preview shows the video file is not working. You should see a thumbnail of the video file such as this:
I'm not sure why, but it could be that the file on the server was moved/renamed/deleted since you added the video to this page. One explanation it is working on Edge but not mobile is perhaps the image was cached previously on the Edge browser.
If you remove the image and try to re-add it through Elementor, can you reproduce the problem?
Another idea is you may have a slightly corrupted video file. Try editing it in any video-editing program (several free online ones) and see if exported file works in your page.
Related
I am using fvplayer plugin for video display in my wordpress site. I have uploaded a video but it is displaying in "MUTE" condition. And i want it to be played "UNMUTE", What should I do? Please share some solution. Below is the screenshot of my fvplayer setting.
You may try to unmute via JS.
i think its muted by default in Wordpress.
This link might help you.
a link
Even Though it is for Youtube Videos.
I contacted their support team and they told me that "Google chrome has restricted autoplay video sound, so google chrome itself mute it." So I removed autoplay in the video and it is perfectly playing when played manually.
there is the problem with the browser that if you unmute the video them it can autoplay but if it is not muted it does not start automatically.
Try to change the chrome to firefox. I think their Spyder Monkey can support autoplay instead of V8 from Google
I run a small wordpress site on the side at http://www.thelittlebitfoundation.org/ and have encountered a strange bug with Chrome. The background video loop is not loading on first load on Chrome. Not as in it won't play, but according to the network monitor on Chrome, there is not even a request sent out for the video at http://www.thelittlebitfoundation.org/wordpress/wp-content/uploads/2017/04/TLBF-2017-WEB-LOW.mp4.
The relevant html
<video height="100%" width="100%" src="http://www.thelittlebitfoundation.org/wordpress/wp-content/uploads/2017/04/TLBF-2017-WEB-LOW.mp4" autoplay loop></video>
shows up just fine in the DOM but there is no request sent out for the src video.
Now here is where it gets particularly weird. If I refresh, it still doesn't load up. However, if I have developer tools open in Chrome and refresh, then the request gets sent out and the video plays as normal. I am not sure what is going on here and would appreciate any insight/help. Thanks.
I figured out what was going on. The response was being sent but the network monitor evidently doesn't pick that up if it is not open when the request is sent. Still not sure why it was working when refreshing with developer tools open...that is strange to say the least.
Anywho, the problem comes from Chrome's new autoplay policy. The video was loading but not autoplaying so it just looked like a black screen. The key was to add the 'muted' attribute to the html5 video tag. After that, the video conforms to Chrome's new autoplay policy and it started right up.
I've done several hours of troubleshooting, and a couple more searching for an answer, couldn't find any, although found some other people with the same problem.
The problem is that when I try and load the page ( http://reinbeerclub.com/ ) on a mobile device (tried android and iphone) the play button goes to the left upper corner and it stops working. so when pressed it doesn't play the video.
i am using the yootheme digit theme wich is based on uikit on a wordpress site, and the MediaElement.js built in.
the code I am using to display the video is:
<video poster="/wp-content/uploads/video.gif" controls class="uk-responsive-width">
<source type="video/youtube" src="http://www.youtube.com/watch?v=tQE919Uc0E0" />
</video>
(basic HTML5) but I can't get it to work on mobile devices.. can anyone help?
Here is a screenshot
Today I found that my youtube videos embeded in iframe does not autoplay
for example.
http://www.youtube.com/embed/U3NVhtUhMbM?autoplay=1
is the autplay deprecated?
plus previously when pressing share button on youtube, it had autoplay parameter, now it's gone
There is a known issue with YouTube API.
Star this issue to get updates on it.
Am tasked with building an ASP.NET 4.0 Web Forms site to support playback of YouTube videos. Will build it as a HTML5 site but am trying to weave my way through the maze of video formats/codecs.
I do not want to use plugins and I want it to have cross-browser support:
IE9/IE8/IE7
Firefox
Chrome
Safari
Majority of traffic will be IE. For the other browsers, latest versions will suffice.
I'm looking to embed the videos directly. Really just need to know how to cater for the different browsers without use of plugins (incl. Google Frame).
Can anyone provide some guidance/direction?
UPDATE
Per Stilgar's answer, there probably will be no advantage gained to creating this as HTML5
If you only need to embed videos from youtube you don't need to care about codecs and browser support. You only need to render the Youtube embed code on your page which is just an iframe. The user can get the html by clicking share > embed on youtube or you can generate it programatically when the user pastes an URL to an youtube video. The code looks like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/Kt82xgsm9N8" frameborder="0" allowfullscreen></iframe>
If you do this youtube will provide a player for the user. The player will be based on the user's settings IN YOUTUBE. For example if the user has selected HTML5 videos on youtube he will get an HTML5 player for his browser. If the user has opted in for Flash or is using an older browser youtube will serve the Flash player. Also some videos (those with ads) are only available with Flash.
Basically even if you want to do something else you can't. That's how Youtube works and you want to embed their videos not serve your own. However I don't see why you will want something different from what they provide. They make their best to support every browser in the best way.
And just FYI the video tag is supported on the latest version of all browsers and is not supported in IE8 and IE7. There are two codecs (with 2 formats) that are important right now these are H.264(mp4) and VP8 (webm)
Safari (including Safari on iOS) and IE9+ (including IE on Windows Phone) support H.264
Chrome, Firefox and Opera support VP8
If you want to support all browsers via the video tag you need to provide both encodings and encode the video twice.
If you want to support IE7 and IE8 your only option is a plugin (be it Flash, Silverlight or just regular old Media Player Plugin that comes by default)
I haven't used it myself yet but I've heard some good things about jPlayer. Check out http://jplayer.org/.
One thing to keep in mind is that while many browsers support HTML5 semantics, they don't support the same codecs. You'll need to encode your video into the various formats that each browser supports. Wikipedia has an example at http://en.wikipedia.org/wiki/HTML5_video.
<video poster="movie.jpg" controls>
<source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
<source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>