I have a simple webpage with an HTML 5 <video> element and simple Javascript for creating links to switch between videos and for making each video stop at predetermined times.
It appears to work fine on Chrome 94, Edge 99, and Vivaldi 4.3 (I am on Windows 10).
In my Firefox 91.7esr, however, when the video stops (at a stop time or at the end), the screen will often black out for about 1 second.
After that, everything continues normally.
It is the entire screen that blacks out, not only the Firefox window or the <video> element on the page.
This happens irregularly about one third of the times (and much less frequently also when the video starts).
Why?
The web page and the videos are local files.
The effect occurs no matter whether hardware acceleration is on or off in Firefox.
It happens also after a reboot.
Here is the respective code:
<!DOCTYPE html>
<html>
<body>
<video id="pomalevi-video" height=540 controls>
Your browser does not support the video tag.
</video>
<br>
<button onclick="pmlv_speed(pmlv_video, 1.0)">1.0x</button>
<button onclick="pmlv_speed(pmlv_video, 1.7)">1.7x</button>
<button onclick="pmlv_speed(pmlv_video, 2.0)">2.0x</button>
<p onclick='pmlv_switch_to(1)'>start video 1</p>
<p onclick='pmlv_switch_to(2)'>start video 2</p>
<script>
var pmlv_video = document.getElementById("pomalevi-video")
var pmlv_video_idx = 1
var pmlv_stoptimes = [[5.1, 8.5, 11.9], [17.0, 20.4]] // list of list of floats: stop times in seconds
function pmlv_pause_at_stoptimes() {
for (var t of pmlv_stoptimes[pmlv_video_idx-1]) {
if(pmlv_video.currentTime >= t && pmlv_video.currentTime <= t+0.5) {
pmlv_video.pause()
pmlv_video.currentTime += 0.5
}
}
}
function pmlv_speed(obj, factor) {
obj.playbackRate = factor
}
function pmlv_switch_to(i, play=true) {
pmlv_video.src = "v" + i + ".mp4"
pmlv_video_idx = i // select the relevant stoptimes
pmlv_video.load()
if (play) {
pmlv_video.play()
}
}
pmlv_video.addEventListener("timeupdate", pmlv_pause_at_stoptimes)
pmlv_switch_to(1, false)
</script>
</body>
</html>
The problem has nothing to do with my HTML or Javascript.
Rather, it appears to be a hardware issue:
The problem occurred on an external monitor that is connected
to my notebook via, first an Icy Box IB-DK2403-C docking station
using USB-C and from there via HDMI.
When I play the video on the internal screen of the notebook,
the problem still occurs, but what is blacked out is still
the external monitor, not the internal one having the Firefox window.
If I connect the monitor to the notebook's HDMI output directly, rather than
through the docking station, the problem disappears.
Furthermore, the setup also appears to be sensitive to audio start/stop
as well: I have seen the screen black out when Windows notification
sounds were played.
But the video still produces the effect with the sound turned off
in the <video> element's controls, so apparently both audio and
video starting or stopping can produce a blackout. Weird.
Why the other browsers are immune to the problem? No idea. (Hints welcome!)
The reason why I did not understand this more quickly is
that I started testing my application only one day after
I had started using the docking station.
I had not yet noticed the blackouts that occurred at other times.
Related
I've encountered an issue with Firefox specifically (I'm using version 61.0.1 (64-bit)) where upon exiting the fullscreen of a video element on a page which is scrolled down it will caused the scrollTop of the body to return to an incorrect position.
Example code to test would be like (where ... are multiple elements causing the page to be long):
<p>1</p>
<p>2</p>
<p>3</p>
...
<p>7</p>
<p>8</p>
<p>9</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>
<p>10</p>
<p>11</p>
<p>12</p>
...
<p>19</p>
<p>20</p>
<p>21</p>
<p><video src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4" loop="loop" controls></video></p>
Example fiddle: https://jsfiddle.net/webbm/p8ws3yc9/
In my example I've tried to keep the HTML to some very basic elements so as not to introduce CSS related issues.
On the example above:
Upon exiting the first video's fullscreen, the scrollTop of the body is in the correct place.
Upon exiting the second video's fullscreen, the scrollTop of the body is moved upwards.
This behaviour still occurs even if there is only the second video element, so I don't believe it's related to having more than one video element present.
Is this a known issue with a work-around?
I've taken this to Mozilla as a bug under https://bugzilla.mozilla.org/show_bug.cgi?id=1479262 and they are investigating.
I've had a scan through previous questions and can't seem to find anything about adding a YouTube video to a page and having it auto play without effecting page load speeds. Is there anyway to allow the full content of the page to carry on loading without the Video creating a bottle neck situation?
It will depend on the device and browser but on a laptop, using the HTML5 video mechanism your page will continue to load while the video starts on most OS's and browsers, without you having to do any complicated ordering.
The video is streamed, which in practice means small chunks are requested at a time, so there is no delay waiting for the full video to download. Most browsers will implement this playback in a way that does not interfere with the rest of the page download and display - e.g. in a separate thread, and even sometimes mostly in the device HW itself.
On a mobile device things are different - many mobile devices will not allow autoplay at all. They implement this restriction protect to the user from incurring excessive charges on mobile data plans.
Many mobile deices will also force the video to play full screen when it does play - this tends to be on a device by device basis. For example iPhones play videos full screen but larger iPad's will allow it inline in the web page (this is an ever changing playing field so its worth checking the status with the latest release if you are interested in a particular device).
Searching around on line I came across this little bit of javascript, and an amend to the YouTube embed code which helped.
<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/ihhAswAsg8c?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Notice how the src="" is empty and the url has been put inside a data-src="" instead. Then add the following javascript.
$(document).ready(function() {
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
});
This will then stop the iframe from automatically making lots of http requests until the rest of the page has finished loading.
I am using a video background plugin on this site http://kimcolemanprojects.com/index.html
Its works great on all browsers, only on chrome the video doesn't show until the user clicks on the screen, which is just a white screen.
Looks like its bound to a click event but I can not work out where. I can see no events bound to this page.
Thanks for your help.
Angela
This is a strange one indeed. It only happens for me when I open your site in a background tab. There are definitely no click handlers. (See "Event Listener Breakpoints" in dev tools.) And the video element does exist and is loaded, even though it's not displaying. So I suspect it's either a bug in Chrome or a quirk in how it handles certain slow-loading pages.
One thing that seems to make it show up is to tweak the CSS in the developer tools. So try adding this to your page at the end of the body element:
<script>
$(document).ready(function() {
setTimeout(function() {
document.getElementsByTagName('video')[0].style.display = '';
}, 500);
});
</script>
That works for me when I run it in the console, so hopefully it will work in script.
Also, there are a few easy things you can do to make the page load much faster and mitigate this particular problem, even if you can't make it go away completely.
Set a dark background color. That way, when the video takes some time to load, people will be able to see the white text immediately.
Make the video MUCH smaller. It's about 21MB, which is way too big for a background. It's encoded at around 3400kb per second, which is more than you need even for HD video on the web. Try it at 1000kb or even less. Maybe 500kb. And don't include an audio track in the video file.
Save the poster image as a jpg instead of png. It's 140kb. You can get it much smaller.
Put all your scripts (except for the mobile redirect) at the bottom of the body tag. This way you can at least get the text and background color displaying without having to load your scripts.
This is my first question, so your patience is much appreciated. I am having a weird issue with safari/chrome mac users only. This works superbly in IE7, IE8, Chrome, FF and safari(windows). Trying to determine and isolate the issue related to safari/chrome browsers since they start playing the embeded video inside hidden div immediately on page-load.
My company redesigned their homepage and I built it on our site recently. I am fairly new and this was my first solo webpage with JQuery slider, HTML5 etc. (I am unable to provide the link here).
Description of the page:
I have a slider in place which is using the auto-advance.js file to
automate the rotation of images every 7 seconds.
One of the images belonging to this image list slider has a "play video"
button. Below is the image map area which calls a javascript
function on "play video" href click that "hides the image" and "displays the video div"
Javascript function:
`function doStuff() {
$('div#vid').css('display','inline');
$('img.hid').css('display','none');
}
`
Here is the hidden div with HTML5 iframe youtube embed code:
`<div style="display:none;" id="vid">
<iframe class="youtube-player" type="text/html" width="770" height="430" src="http://www.youtube.com/embed/cPoENdJx5DQ? wmode=transparent&feature=player_embedded&autoplay=1&rel=0" frameborder="0" allowfullscreen="false">
</iframe>
</div>
`
Everything works beautifully in windows but for mac users the video starts playing in the background (since the div is still hidden they hear music from the video). To fix the issue immediately I had to swtich off the autoplay option (here I edited it back to 1) on the site which has solved the issue temporarily.
I am trying to understand why chrome/safari mac browsers are autoplaying the video on pageload itself and not on href "play video" button click.
I have carried out detailed research and could only find this article on the issue : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27722407.html, which makes me think that maybe this could be because of some code clash possibly? And if it is then why the browsers in windows are working perfectly?
Any help is much appreciated!
I would suggest:
function vidrun(){
var span = document.createElement("span");
span.innerHTML = 'code here for video';
document.getElementById("the surrounding element's id").appendChild(span);
)
This will only add the video when you get to the time you want the video to automatically start playing instead of actually already loading the video and starting it.
All you will have to do to start the video playing when you get to that point is to call the vidrun() and done :]
I use SWFObject 2.2 to play sounds for an AJAX based game I have made. I used to use SWFObject 1, and everything worked fine, but when I updated my game, I updated to 2.2. Now, when users try to listen to music on Youtube or Pandora in another tab on Firefox while playing the game, they can't unless they have that tab selected.
What is interesting is that the video doesn't stop playing, just the sound stops working. I run the following javascript in order to stop the sound effect in my flash file, and it seems to stop the sound at the exact same time on Youtube or Pandora:
$('myflashid').doStop();
The following is the actionscript used for my flash file:
import flash.external.ExternalInterface;
snd=new Sound();
snd.attachSound("MySound1");
ExternalInterface.addCallback( "doPlay", this, doPlay );
ExternalInterface.addCallback( "doStop", this, doStop );
function doPlay() {
snd.start();
}
function doStop() {
snd.stop();
}
I am not sure why this fixes it, but if I set the volume to 0 instead of doing snd.stop(); and then set the volume back to 100 when I start it again, it seems to work fine.