bilibili 直播 HTML5 播放器

B 站的直播的 HTML5 播放器
目前为 2017-02-10 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         bilibili 直播 HTML5 播放器
// @namespace    https://www.kindjeff.com/
// @version      2017.2.10
// @description  B 站的直播的 HTML5 播放器
// @author       kindJeff
// @match        http://live.bilibili.com/*
// ==/UserScript==

(function() {
    'use strict';

    window.onload = function(){
        $.getScript(
            'http://cdn.bootcss.com/hls.js/0.6.19/hls.min.js',
            function(){
                var link = $('#player_object').children('[name="flashvars"]').val();
                var room_id = link.match(/cid=.*?&/)[0].slice(4,-1);
                get_url_and_replace_player(room_id);
            }
        );
        click_list();
    };

    function get_url_and_replace_player(room_id){
        var api_url = 'http://api.live.bilibili.com/api/playurl?platform=h5&cid=' + room_id;
        $.ajax({
            url: api_url,
            type: "GET",
            dataType: 'json',
            success: function(data){
                replace_player(data.data);
            }
        });
    }

    function replace_player(m3u8_url){
        var w = $('#js-player-decorator').width();
        var h = $('#js-player-decorator').height();

        remove_player();

        var player = document.createElement('video');
        player.id = 'h5_player';
        player.style.width = w + 'px';
        player.style.height = h + 'px';
        player.setAttribute('controls', 'controls');
        document.getElementById('js-player-decorator').appendChild(player);

        if(Hls.isSupported()) {
            var video = document.getElementById('h5_player');
            var hls = new Hls();
            hls.loadSource(m3u8_url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
              video.play();
            });
        }
    }

    function remove_player(){
        var flash_player = document.getElementById('player_object');
        if(flash_player!==null)
            flash_player.remove();

        var html5_player = document.getElementById('h5_player');
        if(html5_player!==null)
            html5_player.remove();
    }

    function click_list(){
        if(window.location.pathname==='/'){
            $($('[role="list"]')[0]).children().on('click', function(){
                var room_id = $(this).attr('data-cid');
                get_url_and_replace_player(room_id);
            });
        }
    }
})();
欢迎访问Greasy Fork镜像
