Skip to content

Instantly share code, notes, and snippets.

@Samiulcse

Samiulcse/Streaming Player

Created May 27, 2019 08:50
Show Gist options
  • Save Samiulcse/0a3933270a6f3aad8d209e8e512897d5 to your computer and use it in GitHub Desktop.
Save Samiulcse/0a3933270a6f3aad8d209e8e512897d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Md. Samiul Islam created this gist May 27, 2019.
    78 changes: 78 additions & 0 deletions Streaming Player
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <video controls crossorigin playsinline poster="<?= $file_thumb ?>"></video>
    <button onclick="playVideo('low')">Low Quality</button>
    <button onclick="playVideo('medium')">Medium Quality</button>
    <button onclick="playVideo('high')">High Quality</button>
    </div>
    </div>
    </div>


    <script>
    function playVideo(quality) {
    var content_id = <?= $content_id; ?>;

    $.ajax({
    type: "GET",
    url: "<?= base_url('home/stream_file') ?>",
    data: {
    'content_id': content_id,
    'quality': quality
    },
    dataType: "json"
    }).done(function(response) {
    console.log(response);
    play_video(response);
    })
    };


    const source = '<?= $file_source ?>';

    const video = document.querySelector('video');

    const controls = [
    'play-large', // The large play button in the center
    'restart', // Restart playback
    'rewind', // Rewind by the seek time (default 10 seconds)
    'play', // Play/pause playback
    'fast-forward', // Fast forward by the seek time (default 10 seconds)
    'progress', // The progress bar and scrubber for playback and buffering
    'current-time', // The current time of playback
    'duration', // The full duration of the media
    'volume', // Volume control
    'captions', // Toggle captions
    'settings', // Settings menu
    'fullscreen' // Toggle fullscreen
    ];

    const player = new Plyr(video, {
    controls
    });

    function play_video(source) {
    if (!Hls.isSupported()) {
    video.src = source;
    console.log('isSupported')
    } else {
    const hls = new Hls();
    hls.loadSource(source);
    hls.attachMedia(video);

    window.hls = hls;

    // Handle changing captions
    player.on('languagechange', () => {
    setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
    });
    }

    window.player = player;
    }

    play_video(source);


    </script>