akshay-ranganath/connection_aware_video_player.html

## connection_aware_video_player.html
<!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>
	<!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>