Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS Bin // source https://jsbin.com/butupeq
<!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>
// 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