Created
October 16, 2019 14:41
-
-
Save jamiew/713b93e15667f64d7155b76feebc3933 to your computer and use it in GitHub Desktop.
Need javascript callbacks from Cloudflare in order to intelligently autoplay-mute
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Cloudflare player javascript test</title> | |
| <script type="text/javascript"> | |
| function loadVideo(){ | |
| const videoId = "5d5bc37ffcf54c9b82e996823bffbb81"; | |
| let player = document.getElementById('video-player'); | |
| player.innerHTML = `<stream src="${videoId}" controls="" preload=""></stream>`; | |
| let script = document.createElement('script'); | |
| // script.data_cfasync = false; | |
| script.defer = true; | |
| script.type = "text/javascript"; | |
| script.src = "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=" + videoId; | |
| player.appendChild(script); | |
| return player; | |
| } | |
| function playVideo(video){ | |
| var promise = video.play(); | |
| if (promise !== undefined) { | |
| promise.then(_ => { | |
| console.log("Autoplay worked, nice job"); | |
| }).catch(error => { | |
| console.log("Autoplay was blocked, let's try while muted..."); | |
| video.muted = true; | |
| video.play(); | |
| }); | |
| } | |
| } | |
| document.addEventListener("DOMContentLoaded", function(){ | |
| let player = loadVideo(); | |
| // TODO how do we trigger a callback from the Cloudflare player | |
| // so we can call player.play() with our mute vs. unmuted logic? | |
| // In the meantime, just wait a second and it should be loaded... | |
| setTimeout(function(){ | |
| let video = player.querySelector('video'); | |
| playVideo(video) | |
| }, 1000); | |
| }); | |
| </script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| #video-player { | |
| width: 640px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Cloudflare player test</h1> | |
| <div id="video-player"></div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment