HTML background video not loading - javascript

The HTML background video only loads when I click before the site fully loads. I have the site live here: https://skyr0.cc/
<video id="bgvidhh" preload="auto" autoplay="true" loop="loop">
<script>
var video = document.currentScript.parentElement;
video.volume = 0.1;
</script>
<source src="files/bgvideo.mp4" type="video/mp4">
</video>

I can only play the video if I allow an 'unsafe connection' for loading
in Google Chrome Version 71.0.3578.98 (Official build) (64-bits)
Firefox does not block your video background by default.
Please send some more information about the other JS scripts you are loading
and their order.
Some of your scripts might be making an http-request which is considered unsafe.
Deeper inspection is hard since the console and source code are disabled..

Related

How to be sure that autoplay script for HTML video on Chrome will work?

I want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound

HTML video will not play in Microsoft EDGE

I have the following video in my site. This is set as a fixed background at the top of the page, comprising the main banner. This element plays fine in every browser except EDGE.
I even tried writing a custom javascript snippet to force it to play (called with a button). This works when tested on Chrome but will not work on EDGE.
var vid = document.querySelector('#bgvid');
function playVideo() {
console.log('trying to play!')
vid.play();
};
<video poster="http://cranneyhomeservices.com/wp-content/uploads/2017/05/HS_Loop_Frame.png" id="bgvid" playsinline autoplay muted loop>
<source src="http://cranneyhomeservices.com/Cranney-website.mp4" type="video/mp4" media="all and (max-width:414px)">
</video>
According to my comment you should use getElementById() instead of querySelector(). This should be correctly interpreted by chrome and edge.
Edit:
After testing your fiddle in my Edge it is an security issue. The problem was already discussed on SO:
HTTPS security is compromised error. How to fix?
Make sure that you do not load any content from a non secure source (i.e. https instead of http)

iPad HTML web page issue

I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac:
"A problem occurred with this webpage so it was reloaded"
The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section.
Weirdly, if we change the code to only render say 15 videos the page works fine!
The videos are between 500KB and 3MB each. The videos are 33MB in total.
They are embedded like this:
<video id="video-transport" class="video-bg">
<source src="videos/videoname.mp4" type="video/mp4">
<source src="videos/videoname.webm" type="video/webm">
<p class="vjs-no-js"></p>
</video>
Does anyone have any suggestions of what is wrong with the page? Is there some kind of upper memory limit or page size we are exceeding.
Is there an easy way of debugging this?
Thanks,
Phil
No idea why it's breaking, but...
Have you tried using the preload property for the videos to prevent loading them on page load ?
Related question
Or, if that doesn't workf for you, have you though a about using the fullpage.js lazy loading option the videos?
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>

flowplayer: chrome won't load mp4 if webm specified first

flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.

Audio Track Duration Showing "Infinity:NanNan" in Safari Only

I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>

Categories