实现网易云视频直播播放器功能

本文涉及的产品
视频直播,500GB 1个月
简介: ...
<!-- 直播播放器区域 -->
        <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');
    });
});

目录
相关文章
|
应用服务中间件 视频直播 Linux
windows下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
windows下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
2873 0
windows下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
|
缓存 网络协议 应用服务中间件
Linux下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
Linux下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
1042 0
Linux下使用Nginx搭建Rtmp流媒体服务器,实现视频直播功能
|
视频直播
视频直播源码技术知识分享:连麦功能(一)
我们开发视频直播平台就要去了解视频直播开发相关功能知识,这对我们开发平台有着重要的作用,连麦技术就是视频直播源码重要的技术功能之一,每一个功能技术都有自己的用武之地
视频直播源码技术知识分享:连麦功能(一)
|
视频直播
详解!视频直播源码平台搭建开发:录制功能
视频直播源码平台的录制功能能够为用户提供更多方便、灵活性,同时也增加了直播内容的传播和价值,这也使录制功能成为布谷科技视频直播源码平台的必备功能之一。
详解!视频直播源码平台搭建开发:录制功能
|
编解码 视频直播 Android开发
安卓实现视频直播(rtmp)以及直播推流(NDK实现)
安卓实现视频直播(rtmp)以及直播推流
899 0
|
编解码 边缘计算 监控
深度解读:阿里云视频直播重磅功能升级
2022年注定是体育超级大年,冬奥、亚运会、大运会、世界杯等各类大型体育赛事应接不暇。随之而来便是各类赛事直播,客户对直播服务要求变得越来越高,视频直播技术创新显得格外重要。如何利用直播技术创新降低线下部署导播台的成本、如何提供灵活及场景化的能力、如何确保线上内容传输安全稳定,成为许多企业客户关心的问题。 为更好服务客户,阿里云对视频直播进行了重磅功能升级,打造一站式沉浸体验云上虚拟直播间服务,提供在传输处理云上直播高可靠、冗余设计等端到端一站式的能力,为大型赛事或活动保提供保驾护航的能力。
1078 0
深度解读:阿里云视频直播重磅功能升级
|
视频直播
直播系统的顶梁柱:视频直播源码中的礼物功能
我们了解的直播系统功能是十分的实用且丰富的,一般来说,视频直播源码自带的功能有:直播功能、私信功能、邀请奖励、财务管理功能、短视频功能、直播PK功能、多种礼物功能、分享功能、拉黑功能、带货商城功能、家族功能、标签功能、评论功能等等实质性的功能,今天就针对礼物功能来做一下详细的介绍。
直播系统的顶梁柱:视频直播源码中的礼物功能
|
Web App开发 监控 前端开发
Chrome 70-71 Live Expression 及 global variable 功能
chrome浏览器是世界上最适合开发人员使用的浏览器的,没有之一。 Live Expression 从 chrome70起,我们可以在控制台上方可以放一个动态表达式,用于实时监控它的值。
1434 0
|
视频直播
手机视频直播系统全面升级,直播软件源码全新功能体验
针对于不同细分领域直播软件的功能也越来越多样化,直播软件发展至今,有哪些功能是令人难以抗拒的呢?
下一篇
无影云桌面