trình play youtube

<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>How to Control YouTube's Video Player with JavaScript</title>
    <style>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    background-color: #eee;
}
body {
    font: normal 14px sans-serif;
}
header {
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    padding: 25px 40px;
    background-color: #3A56B7;
    overflow: hidden;
}
header h1 {
    float: left;
    font: normal 24px/1.5 'Open Sans', sans-serif;
    color: #fff;
}
header a {
    color: #fff;
    float: right;
    text-decoration: none;
    display: inline-block;
    padding: 13px 50px;
    border-radius: 3px;
    font: bold 14px/1 'Open Sans', sans-serif;
    text-transform: uppercase;
    background-color: #F05283;
}
#video-placeholder {
    width: 100%;
}
#controls {
    margin-right: 0;
}
#controls ul {
    list-style: none;
}
#controls pre {
    border: 6px solid #E7E9F3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#controls ul li {
    margin: 40px;
}
#controls ul li code {
    padding: 24px;
    line-height: 1.45;
    font-size: 13px;
}
h2 {
    display: block;
    margin-bottom: 24px;
    font-size: 26px;
    color: #43495F;
}
h2 ~ * {
    margin-bottom: 24px;
}
h2 + pre {
    margin-top: 36px;
}
.thumbnail {
    cursor: pointer;
    margin: 0 10px 20px 0;
    border: 6px solid #fff;
    box-shadow: 0 1px 1px #ccc;
    width: 200px;
}
#progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    cursor: pointer;
}
#controls i {
    color: #000;
    font-size: 32px;
    cursor: pointer;
}
#volume-input {
    height: 32px;
    width: 45px;
}
#next,
#prev {
    display: block;
}
@media (max-width: 1000px) {
    header h1 {
        float: none;
    }
    header a {
        margin-top: 25px;
        float: none;
    }
}
@media (max-width: 1200px) {
    #video-placeholder {
        max-width: 100%;
        position: static;
    }
    #controls {
        margin-right: 0;
    }
    #bsaHolder {
        display: none;
    }
}
</style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

</head>
<body>

<header>
    <h1>How to Control YouTube's Video Player with JavaScript</h1></header>

<ul>

<li>

<h2>Player Initialization</h2>

<pre><code class="js">var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'V_wpL7eRRAM',
        playerVars: {
            color: 'white',
            playlist: 'BjtHo1CFw6w,ltqjleAPL50'
        },
        events: {
            onReady: initialize
        }
    });
}

function initialize(){

// Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

// Clear any old interval.
    clearInterval(time_update_interval);

// Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}</code></pre>
        </li>

<li>

<h2>Duration</h2>

<pre><code class="js">// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

seconds = seconds < 10 ? '0' + seconds : seconds;

return minutes + ":" + seconds;
}</code></pre>

</li>

<li>

<h2>Progress Bar</h2>

<pre><code class="js">$('#progress-bar').on('mouseup touchend', function (e) {

// Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

// Skip video to new time.
    player.seekTo(newTime);

});

// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}</code></pre>
        </li>

<li>

<h2>Play</h2>
            <i id="play" class="material-icons">play_arrow</i>

<pre><code class="js">$('#play').on('click', function () {

player.playVideo();

});</code></pre>

</li>

<li>

<h2>Pause</h2>
            <i id="pause" class="material-icons">pause</i>

<pre><code class="js">$('#pause').on('click', function () {

player.pauseVideo();

});</code></pre>
        </li>

<li>

<h2>Mute / Unmute</h2>
            <i id="mute-toggle" class="material-icons">volume_up</i>

<pre><code class="js">$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});</code></pre>
        </li>

<li>

<h2>Set volume</h2>
            <input id="volume-input" type="number" max="100" min="0"/>

<pre><code class="js">$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});

// To get the current volume of the player use this method:
// player.getVolume()</code></pre>
        </li>

<li>

<h2>Speed</h2>
            <select id="speed">
                <option>0.25</option>
                <option>0.5</option>
                <option selected="selected">1</option>
                <option>1.5</option>
            <option>2</option>
            </select>

<pre><code class="js">$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

// To get the current playback rate for a video use this method:
// player.getPlaybackRate()

// To get all available playback rates for the current video use:
// player.getAvailablePlaybackRates()</code></pre>
        </li>

<li>

<h2>Quality</h2>
            <select id="quality">
                <option>small</option>
                <option>medium</option>
                <option selected="selected">large</option>
                <option>hd720</option>
                <option>hd1080</option>
            <option>highres</option>
            </select>

<pre><code class="js">$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});

// To get the actual video quality of the running video use this method:
// player.getPlaybackQuality()

// To get a list of the available quality formats for a video use:
// player.getAvailableQualityLevels()</code></pre>
        </li>

<li>

<h2>Playlist Next</h2>
            <i id="next" class="material-icons">fast_forward</i>

<pre><code class="js">$('#next').on('click', function () {
    player.nextVideo()
});</code></pre>
        </li>

<li>

<h2>Playlist Previous</h2>
            <i id="prev" class="material-icons">fast_rewind</i>

<pre><code class="js">$('#prev').on('click', function () {
    player.previousVideo()
});</code></pre>
        </li>

<li>

<h2>Dynamically Queue Video</h2>
            <img class="thumbnail" data-video-id="h14wr4pXZFk" src="images/cat_video_1.jpg"/>
            <img class="thumbnail" data-video-id="KkFnm-7jzOA" src="images/cat_video_2.jpg"/>
            <img class="thumbnail" data-video-id="Ph77yOQFihc" src="images/cat_video_3.jpg"/>

<pre><code class="js">$('.thumbnail').on('click', function () {

var url = $(this).attr('data-video-id');

player.cueVideoById(url);

});</code></pre>

</li>

</ul>

</div>

</body>
</html>

Kilivecode

Code Editor

trình play youtube