work around browser playback restrictions

This commit is contained in:
j 2025-02-01 16:03:27 +05:30
parent 57a0c3a032
commit b9c464b7a1

View File

@ -9,7 +9,7 @@
<title>CAMP</title>
{% endblock %}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
<link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}?20250201">
<link rel="stylesheet" type="text/css" href="{% static "css/jquery.bxslider.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/app.css" %}">
@ -117,6 +117,42 @@
});
}
$(document).ready(loadSlideshow);
var restrictedElements = [];
function removeBehaviorsRestrictions(event) {
if (restrictedElements.length > 0) {
var rElements = restrictedElements;
restrictedElements = [];
rElements.forEach(function(video) {
if (video.autoplay && video.paused) {
video.load()
video.play()
if (video.paused) {
restrictedElements.push(video)
}
} else if (video.readyState < 4) {
video.load()
}
});
}
}
if (document.querySelector('video')) {
let video = document.createElement('video');
video.muted = true
video.play();
if (video.paused) {
restrictedElements = document.querySelectorAll('video.gif')
window.addEventListener('keydown', removeBehaviorsRestrictions);
window.addEventListener('mousedown', removeBehaviorsRestrictions);
window.addEventListener('touchstart', removeBehaviorsRestrictions);
restrictedElements.forEach(video => {
if (!video.poster) {
video.poster = video.src.replace('.mp4', '.jpg')
video.muted = true
}
})
}
}
</script>
{% block end %}
{% endblock %}