| <!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