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.
Related
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.
Very strange. I uploaded the video in all three formats: .mp4, .ogv & .webm. It just won't play in chrome. In Safari and Firefox, it works just fine. The strange part is: it used to work fine until yesterday and it still works fine if you click on another link on my site and then go back.
I'm using the Salient theme on WordPress.
Link to the site
Does anyone have an idea why?
It's due to Chrome's new autoplay policy - it will not autoplay videos on first load unless the video is muted. Can you add 'muted' to the video attributes?
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Edit: there should be a 'Mute Video' option in the Video Background settings of your row.
I uploaded a video to Google Drive and I created a blog in Blogspot. Then, I inserted a code like this in one of my blog posts:
iframe width="560" height="315"
src="http://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/preview"
frameborder="0" allowfullscreen="true" / iframe
I have tested the code under the following conditions and get the following results:
When using my PC, I can go to fullscreen and select the video quality/subtitles (another button);
When using Safari for iPad, I can see the video quality/subtitles button, but can't go to fullscreen;
When using Mercury Browser for iPAD with user-agent "Safari (iPhone Mobile)", I can't see/use the video quality/subtitles button, but now I am able to go fullscreen;
Google Drive's app from App Store can't use the video quality/subtitles button, but is also able to go fullscreen;
Puffin browser (app from App Store) is able to use the video quality/subtitles button and go fullscreen. However I stopped using this for 2 reasons:
Video takes a lot of time to load. In Safari, it takes a couple of seconds. Using Puffin, over 10. Don't know why, but it looks like it's either my iPad that is slow (4th gen, last iOS), or this is to be expected;
Even when the video is playing, it looks like playback is stuttering. I mean, not running smoothly, as the same browser does in the Youtube website. BTW, Puffin supports Flash, but until recently, this functionality was paid and lasted only a short time;
My questions are:
why is 2) happening?
Can it be fixed by using another CODE in my personal blog/website or I do need to wait for future iOS updates?
Also, Youtube's iframe allows us to go fullscreen in Safari from iPad. Which means Google is to be blamed (I guess) for this to happen with Google-Drive.
I wonder if there's a way to bypass this restriction, and force the player to go fullscreen, also showing subtitles, as it happens with Youtube.
On our website which is built in Kentico we have embedded a youtube video, as follows:
<div class="youtube">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<%# Eval("YouTubeId") %>?autoplay=0&autohide=1&controls=1&loop=0&playlist&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=1&iv_load_policy=1&start=0&theme=dark&color=red&enablejsapi=1&" frameborder="0" allowfullscreen></iframe>
</div>
The above iframe has a thumbnail associated with it, which looks like this
<div class="poster"><span></span><%# IfImage("Thumbnail",GetBrickImage(Eval("Thumbnail"), "featurevideo", Eval("Title")), "") %></div>
and sits just under the closing div of class youtube.
Now my issue is when the users come to the site and presses play on the thumbnail the video doesn't play straight away instead the thumbnail disappears and the default youtube play button appears making the user press play again, when I use the developer tool bar and press play for the first time I get the error
Blocked loading mixed active content "http://www.youtube.com/iframe_api"
I cannot for the life of my figure out what is going wrong, We have recently installed a SSL certificate on the server this site currently sits on and since then its been causing this issue. From what I have read and see people were suggesting to drop the www. so it would be https://youtube.com.... again this didn't help me. I then went and tested this on IE10/Chrome and the issue is still happening. Can anyone suggest anything for this?
It is a limitation of the CKEditor. It has been resolved in version 8.2.1.
http://devnet.kentico.com/questions/kentico-v8-ckeditor-youtube-embeds-https
The following flash does not initially load in firefox, but if I click the second tab on the right, and then go back to the first, it loads. This works in Chrome and IE. Here is the webpage.
This is odd, normally things dont work in IE but do in Chrome and Firefox. Upgrade your Flash Player is my advice
Have you ruled out the possibility of it being a browser problem and not related to the site?
Does Firefox do this for any other sites?
Try clearing you cache and upgrading your Flash plugin to rule out the browser.
At a guess, a timing issue. Flash doesn't keep a network stack, it merely passes network calls to the browser, so any kind of logic that is sensitive to the timing or order of loads, load events, etc., can function differently from browser to browser.
But it's impossible to say more without seeing some code.