긍정적 사고, 음식의 절제, 규칙적인 운동

player.vimeo.com

<div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 59777392,
        width: 640,
        loop: true
    };

    var player = new Vimeo.Player('made-in-ny', options);

    player.setVolume(0);

    player.on('play', function() {
        console.log('played the video!');
    });
    
    
    //-- 플레이    
    player.play();

</script>

<!-- vimeo embed start, autoplay  -->
<div id="made-in-ny"></div>

<div class="buttons">
    <button id="play-button"   data-method="play">Play</button>
    <button id="pause-button"  data-method="pause">Pause</button> 
</div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 465623199,
        width: 640,
        loop: false
    };

    var player = new Vimeo.Player('made-in-ny', options);

    //player.setVolume(0);
    player.setVolume(0.5);
    //player.setVolume(1);
 
    //setTimeout(function(){ player.setVolume(0.5); }, 3000);
    //-- 플레이    
    //player.play();
    //setTimeout(function(){ player.play(); }, 3000);
    
    $("#play-button").click(function(){ player.play(); }); 
    $("#pause-button").click(function(){ player.pause(); }); 
     
</script>
 

github.com/vimeo/player.js

player.vimeo.com/api/demo

Plyr is a simple HTML5 media player that offers WebVTT captions. It’s lightweight, accessible, and customizable, and works with all modern browsers.

Checkout the demo.

Why?

We wanted a lightweight, accessible and customisable media player that just supports modern browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.

Features

• Accessible - full support for VTT captions and screen readers.
• Lightweight - just 8KB minified and gzipped.
• Customisable - make the player look how you want with the markup you want.
• Semantic - uses the right elements. <input type="range"> for volume and <progress> for progress and well, <button>s for buttons. There's no <span> or <a href="#"> button hacks.
• Responsive - as you'd expect these days.
• Audio & Video - support for both formats.
• Embedded Video - support for YouTube (Vimeo soon).
• API - toggle playback, volume, seeking, and more.
• Fullscreen - supports native fullscreen with fallback to "full window" modes.
• i18n support - support for internationalization of controls.
• No dependencies - written in vanilla JavaScript, no jQuery required.

Oh and yes, it works with Bootstrap.

.