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

<!-- 直播播放器区域 -->
        <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‘);
    });
});

时间: 2024-10-13 12:14:13

实现网易云视频直播播放器功能的相关文章

如何设计一款跨平台低延迟的RTMP/RTSP直播播放器

开发背景 2015年,当我们试图在市面上找一款专供直播播放使用的低延迟播放器,来配合测试我们的RTMP推送模块使用时,居然发现没有一款好用的,市面上的,如VLC或Vitamio,说白了都是基于FFMPEG,在点播这块支持格式很多,也非常优异,但是直播这块,特别是RTMP,延迟要几秒钟,对如纯音频.纯视频播放,快速启播.网络异常状态处理.集成复杂度等各方面,支持非常差,而且因为功能强大,bug很多,除了行业内资深的开发者能驾驭,好多开发者甚至连编译整体环境,都要耗费很大的精力. 我们的直播播放器,

用OpenCV制作视频控制播放器(无声音)

申明:OpenCV是计算机视觉库,所以用在图片或视频处理上,故播放的视频暂时没有声音 软件:用OpenCV制作视频控制播放器(无声音) 功能说明:新建播放窗口,添加进度条可以拖动视频播放. 流程图: 功能说明: 1. 新建进度条 cvCreatTrackbar("","",&,frames,callback) 2.获取总帧数 cvGetCaptureProperty(&,id) double cvGetCaptureProperty( CvCaptu

仿网易云音乐的播放进度条

仿网易云音乐的播放进度条,有三种状态:播放.暂停和拖动,只是实现了动画和主要的交互逻辑,其他细节(如暂停音乐的播放等)还需要自己完善: DKPlayerBar 是继承于UIControl的,如果想获取播放\暂停的事件建议用标准的addTarget方法: [playerBar addTarget:self action:@selector(playOrPause) forControlEvents:UIControlEventValueChanged]; 然后在DKPlayerBar里监听DKPl

github视频录制播放相关功能-参考

lookingstars/JZVideoDemo  视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo  iOS video cut ,also can add blackgroundmusic iOS 视频剪辑,视频添加背景音乐 Updated on 13 Jun 2014 Objective-C 139 50 835239104/KrVideoPlayerPlus  根据36Kr开源的KRVideoPlayer

LZH_IJKPlayer-一个最简单使用的视频播放器,集成于bilibili开源直播播放器(ijkplayer)

     随着视频直播APP的迅速发展,许多APP也都会加入直播的功能,提高用户量.在网上也是寻找了许多直播的播放器,无意间发现Bilibili开源了一款播放器ijkplayer,想从最开始的步骤集成的同学可以点进去查看集成教程.当然,我这里为大家已经都封装好啦,只要简单的几步就可以使用该播放器了.LZH_IJKPlayer点击这个就可以下载源代码了.那如何集成到你的项目中呢. 1.先看Demo 将箭头所指的两个文件夹添加到你的工程中.ijkplayer已经打包成framework了,就是图中的

精品推荐!一对一视频直播APP完全功能列表大全!

1.一套完整的一对一视频直播app功能大全1.聊天 私聊.聊天室.点亮.推送.黑名单等;2.礼物 普通礼物.豪华礼物.红包.排行榜.第三方充值.内购.礼物动态更新.提现等:3.直播列表 关注.热门.最新.分类直播用户列表等:4.自己直播 录制.推流.解码.播放.美颜.心跳.后台切换.主播对管理员操作.管理员对用户等:5.房间逻辑 创建房间.进入房间.退出房间.关闭房间.切换房间.房间管理员设置.房间用户列表等:6.用户逻辑 普通登陆.第三方登陆.注册.搜索.修改个人信息.关注列表.粉丝列表.忘记

网易云音乐歌词下载器

网易音乐是目前最好用的音乐播放器,很多朋友喜欢从上面下载免费的音乐,但是可惜没法下载到对应的歌词. 这个小工具就是为你解决这个小问题的. 1.首先在网易云音乐网页版上搜到歌曲,复制地址栏里歌曲的ID: 2.把ID复制进小工具,即可获取歌词,就这么easy. 下载地址:http://vdisk.weibo.com/s/Ac4rv5T6QRbu 源代码:https://github.com/ituff/163lyric 注意:该工具需要.net framework 2.0支持.

树莓派播放视频的播放器omxplayer

omxplyer为树莓派量身定做的一款GPU硬件加速的播放器,很好的解决了树莓派cpu计算力不足的缺点.(播放时cpu一定都不烫手) 1.安装方法: CTRL + ALT + T 调出终端命令行输入 sudo apt-get install omxplayer 等待数秒安装完毕... 2.使用方法: 直接在终端中输入 omxplayer -o hdmi /path/filename.mp4 解释: -o hdmi 表示音视频直接通过HDMI 播放 后面就是视频文件的路径了 3.播放器操作方法:

乐乐音乐播放器 功能介绍(一)

该播放器主要完成的功能如下: 1.      引导页面.每个应用在启动的时候都会有一个引导页面,该引导页面的功能就是让用户可以在短时间内了解该应用的功能和相关操作. 2.      欢迎页面.应用在启动的时候都会有一个splash界面,该页面主要显示该应用的版本.名称和版权等相关信息. 3.      界面设计.一个播放器界面相对较多,主要分为:主界面.查找本地歌曲界面.歌曲列表界面.歌词界面.锁屏界面.皮肤.设置界面和播放界面等. 4.      皮肤设计.针对用户的不同喜好,提供多种皮肤.