Created
January 3, 2021 14:05
-
-
Save damiandrozdowicz/4965f79fe8e357374ddccfd27cdf1de2 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/butupeq
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="js-video"></div> | |
| <p>Status: <span class="status">...</span></p> | |
| <p><button class="js-play">Play</button> <button class="js-pause">Pause</button> <button class="js-mute">Mute</button></p> | |
| <script src="https://player.vimeo.com/api/player.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <script id="jsbin-javascript"> | |
| // the id of our video | |
| const vimeoId = 488734703; | |
| // reference html elements | |
| const videoWrapperEl = 'js-video'; | |
| const statusEl = $('.status'); | |
| const playBtn = $('.js-play'); | |
| const pauseBtn = $('.js-pause'); | |
| const muteBtn = $('.js-mute'); | |
| // config passed to Vimeo API | |
| const viemoOptions = { | |
| id: vimeoId, // this is the key ingredient | |
| width: 400, | |
| loop: false | |
| } | |
| const player = new Vimeo.Player(videoWrapperEl, viemoOptions); | |
| pauseBtn.on('click',()=>{ | |
| player.pause(); | |
| statusEl.text('paused'); | |
| }) | |
| playBtn.on('click',()=>{ | |
| player.play(); | |
| statusEl.text('playing'); | |
| }) | |
| muteBtn.on('click',()=>{ | |
| player.setVolume(0) | |
| statusEl.text('muted'); | |
| }) | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| // the id of our video | |
| const vimeoId = 488734703; | |
| // reference html elements | |
| const videoWrapperEl = 'js-video'; | |
| const statusEl = $('.status'); | |
| const playBtn = $('.js-play'); | |
| const pauseBtn = $('.js-pause'); | |
| const muteBtn = $('.js-mute'); | |
| // config passed to Vimeo API | |
| const viemoOptions = { | |
| id: vimeoId, // this is the key ingredient | |
| width: 400, | |
| loop: false | |
| } | |
| const player = new Vimeo.Player(videoWrapperEl, viemoOptions); | |
| pauseBtn.on('click',()=>{ | |
| player.pause(); | |
| statusEl.text('paused'); | |
| }) | |
| playBtn.on('click',()=>{ | |
| player.play(); | |
| statusEl.text('playing'); | |
| }) | |
| muteBtn.on('click',()=>{ | |
| player.setVolume(0) | |
| statusEl.text('muted'); | |
| }) | |
| </script></body></html> |
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
| // the id of our video | |
| const vimeoId = 488734703; | |
| // reference html elements | |
| const videoWrapperEl = 'js-video'; | |
| const statusEl = $('.status'); | |
| const playBtn = $('.js-play'); | |
| const pauseBtn = $('.js-pause'); | |
| const muteBtn = $('.js-mute'); | |
| // config passed to Vimeo API | |
| const viemoOptions = { | |
| id: vimeoId, // this is the key ingredient | |
| width: 400, | |
| loop: false | |
| } | |
| const player = new Vimeo.Player(videoWrapperEl, viemoOptions); | |
| pauseBtn.on('click',()=>{ | |
| player.pause(); | |
| statusEl.text('paused'); | |
| }) | |
| playBtn.on('click',()=>{ | |
| player.play(); | |
| statusEl.text('playing'); | |
| }) | |
| muteBtn.on('click',()=>{ | |
| player.setVolume(0) | |
| statusEl.text('muted'); | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment