I build a page containing 6 videos. There is a thumbnail for each video, and when you click on the thumbnail, a custom lightbox covers the page with the video player in the middle. The video plays once the light box appears, and pauses when it closes.
I put this up about a month ago and all of a sudden I today the videos would no longer load. I keep getting 2 errors:
1. net::ERR_SPDY_PROTOCOL_ERROR
2. Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
These errors are intermittent. The first is attached to the video file loading and always takes a second to appear.
my original code looked like this:
HTML
<div class="video_page_video_wrap">
<h3>{{ widget.video_title }}</h3>
<a href="#" class="video_link" onclick="popup_video(this)">
<img src="{{ widget.video_thumbnail.src }}" alt="{{ widget.video_thumbnail.alt }}">
</a>
<div class="video_container">
<div class="video_wrap">
<div class="video_close">X Close</div>
<video autoplay class="step_video" loop controls>
<source src="{{ widget.video_mp4_url }}" type="video/mp4">
<source src="{{ widget.video_webm_url }}" type="video/webm">
</video>
</div>
</div>
</div>
Javascript
$('.step_video').each(function() {
var video = $(this).get(0);
video.pause();
});
function popup_video(i) {
var video_con = $(i).siblings('.video_container');
var video_wrap = video_con.children('.video_wrap');
var video = video_con.find('.step_video').get(0);
var close = video_con.find('.video_close');
video_con.show();
video.play();
close.on('click touch', function() {
video_con.hide();
video.pause();
});
if (video_con.is(":visible")){
$(video_con).on("click touch", function(){
video_con.hide();
video.pause();
});
video_wrap.on("click touch", function(e){
e.stopPropagation();
});
}
}
All I could tell from research is that for some reason the play promise was being interfered with by the pause function (?), so I altered this a bit.
I set preload to none on the video player, removed the initial pause on the videos in my javascript because the videos loading was blocked, then I loaded the video when the function is fired before playing the video:
HTML
<div class="video_page_video_wrap">
<h3>{{ widget.video_title }}</h3>
<a href="#" class="video_link" onclick="popup_video(this)">
<img src="{{ widget.video_thumbnail.src }}" alt="{{ widget.video_thumbnail.alt }}">
</a>
<div class="video_container">
<div class="video_wrap">
<div class="video_close">X Close</div>
<video class="step_video" loop controls preload="none">
<source src="{{ widget.video_mp4_url }}" type="video/mp4">
<source src="{{ widget.video_webm_url }}" type="video/webm">
</video>
</div>
</div>
</div>
Javascript
$('.step_video').each(function() {
var video = $(this).get(0);
});
function popup_video(i) {
var video_con = $(i).siblings('.video_container');
var video_wrap = video_con.children('.video_wrap');
var video = video_con.find('.step_video').get(0);
var close = video_con.find('.video_close');
video.load();
video_con.show();
video.play();
close.on('click touch', function() {
video_con.hide();
video.pause();
});
if (video_con.is(":visible")){
$(video_con).on("click touch", function(){
video_con.hide();
video.pause();
});
video_wrap.on("click touch", function(e){
e.stopPropagation();
});
}
}
The videos are now playing when you click their thumbnail (again) however it seems like they are taking quite a few seconds to load and do not play until they are loaded (from what I can tell). Before they would play immediately. You can see the page here: http://www.icoachfirst.com/videos using the last version of the code.
I am thinking that the server is just having a bad day and the slow file serving is causing the play/pause functions to trip up, and my last revision to the code has made it slow down worse by requiring the video to load before playing. I'm lost in this though.
