zoukankan      html  css  js  c++  java
  • 实现网易云视频直播播放器功能

    <!-- 直播播放器区域 -->
            <div class="live-channel-player-area">
                <video id="my-video" class="video-js" controls width="320">
                    <source src="http://v1.live.126.net/live/4016cd4acc8041b69551cc4ce1696fce.flv" type='video/flv' />
                    <source src="http://pullhls1.live.126.net/live/4016cd4acc8041b69551cc4ce1696fce/playlist.m3u8" type="application/x-mpegURL" />
                </video>
                <div class="logo">
                    <img alt="" src="/resources/img/liveSupport/sylogo_01.png">
                </div>
                <a class="back" href="/liveSupport/index">
                    <span class="reback"></span>
                </a>
            </div>
    $(function(){
        var width = document.documentElement.clientWidth;
        var height = (width * 720) / 1280;
        var btnLeft = width / 2 - 90 / 2;
        var btnTop = height / 2 - 45 / 2;
    
        var myPlayer = neplayer("my-video", {
            width : width,
            height : height
        }, function() {
            $(".video-js .vjs-big-play-button").css({
                "left" : btnLeft + "px",
                "top" : btnTop + "px"
            })
        });
        myPlayer.onError(function(err) {
            if (err.errCode == 2) {
                $(".vjs-modal-dialog-content").html("网络原因导致无法观看");
            } else if (err.errCode == 3) {
                $(".vjs-modal-dialog-content").html("您的浏览器暂不支持本次直播的信号源");
            } else if (err.errCode == 4) {
                $(".vjs-modal-dialog-content").html("当前暂无直播信号");
            }
        });
    
        myPlayer.onPlayState(1, function() {
            console.log('play');
            $('.back').addClass('hide');
        });
        myPlayer.onPlayState(2, function() {
            console.log('pause');
            $('.back').removeClass('hide');
        });
        myPlayer.onPlayState(3, function() {
            console.log('ended');
            $('.back').removeClass('hide');
        });
    });

  • 相关阅读:
    mybatis foreach 循环 list(map)
    zust_第二周——瞎扯系列
    Codeforces Round #271 (Div. 2)-B. Worms
    Codeforces Round #271 (Div. 2)-A. Keyboard
    2014年牡丹江现场赛打铁记
    Codeforces Round #274 (Div. 2)-C. Exams
    Codeforces Round #274 (Div. 2)-B. Towers
    Codeforces Round #274 (Div. 2)-A. Expression
    二叉树
    Codeforces Round #273 (Div. 2)-C. Table Decorations
  • 原文地址:https://www.cnblogs.com/zhangwei595806165/p/5809737.html
Copyright © 2011-2022 走看看