Created
March 5, 2021 18:50
-
-
Save akshay-ranganath/d355a4d8ea7058d94a7036feac65d013 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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