<!doctype html> | |
<html lang=en> | |
<head> | |
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"> | |
<title>Simple Video Player</title> | |
</head> | |
<body> | |
<h3>Connection Aware Video Player</h3> | |
<video id="player" width="320" height="240" controls onclick="switchVideo" poster="https://res.cloudinary.com/demo/video/upload/w_320,h_240,f_auto,q_auto/test_video_r2tk5n.jpg" autoplay muted> | |
<source src="https://res.cloudinary.com/demo/video/upload/w_320,h_240,e_preview:duration_5,f_auto,q_auto/test_video_r2tk5n"> | |
Your browser does not support the video tag. | |
</video> | |
<script type="text/javascript"> | |
// Uses Network Information API: https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API | |
// swap the preview with the real video, only if user is on a 4g connection and above | |
var player = document.getElementById('player') | |
player.addEventListener('ended', function() { | |
// check effective connection type | |
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; | |
var type = connection.effectiveType; | |
if (type != "2g" && type != "3g") { | |
player.src = "https://res.cloudinary.com/demo/video/upload/w_320,h_240,f_auto,q_auto/test_video_r2tk5n" | |
player.autoplay = false | |
player.muted= false | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment