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)
Related
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
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..
<video class="student-video" controls preload="none">
<source src="video.mp4" type="video/mp4">
</video>
somehow this works perfectly in chrome but doesn't work in firefox.
Is there anyway for firefox to prevent autoplay?
I have heard about this problem, you can try this:
Go to Preferences > Advanced > General
In Browsing section, unmark the "Use hardware acceleration when available:
Save it.
Now restart Firefox and check your video.
It may help you, in some cases this is also issue.
You can also try this:
How to play MP4 video in firefox
Try to remove the "proload" option from the code and test
I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?
So this is an odd issue I'm running into. I've only tested Chrome and Safari, both on Mac, and between those browsers the problem only manifests on Chrome.
I have a very basic HTML5 video element, which loads a video from my server, and the user has a few buttons onscreen to jump to specific times within the video.
When the video file is referenced as a direct link, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="videos/vid102.webm" />
<source type="video/mp4" src="videos/vid102.mp4" />
<p>Your browser does not support this video.</p>
</video>
...it works just fine.
However, I've just set it up so the videos can be instead loaded via a PHP fpassthru, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="getvideo.php?t=webm&v=166" />
<source type="video/mp4" src="getvideo.php?t=mp4&v=166" />
<p>Your browser does not support this video.</p>
</video>
where getvideo.php looks something like this:
<?php
$videoID = $_REQUEST["v"];
$videoType = $_REQUEST["t"];
$vidPath = "videos/video$vidFile.$videoType";
$fp = fopen($vidPath, 'rb');
header("Content-Type: video/$videoType");
header("Content-Length: " . filesize($vidPath));
fpassthru($fp);
?>
The strange behavior is this: On both browsers, the video loads and plays just fine. On Chrome, however, the version using the fpassthru PHP script breaks the ability to set the player's "currentTime" attribute and thus jump to somewhere in the video. If I call document.getElementById('thevideo').currentTime = 50, instead of jumping to the 50 second mark, it just stays where it is.
Any idea why this might be?
UPDATE:
I've seen some indications that this has something to do with Chrome specifically requiring the "Accept-Ranges" header to be provided in the response. I've added the header "Accept-Ranges: bytes" to the .php script's output, and I've made sure that the web server is allowing byte range requests, but still, it's not working.
You are correct about requiring the "Accept-Ranges" header, as part of HTTP Byte Serving. I suggest reading this answer to a similar question:
Seekbar not working in Chrome
Adding the response header is not sufficient. You have to also respond with the "206 Partial Content" status code and return only the requested range of bytes. It sounds like you're still returning the whole file. fpassthru will read back the file all the way to the end, so it looks like you're going to need to find another way to read the file.