基于 Bilibili/ijkplayer 的视频播放器(Update)

简介

因为最近项目有视频播放的需求,所以就有了这个项目。视频的编解码功能是由 Bilibili 开源的 ijkplayer 处理的,这个项目只是基于 UI 层面的上封装。

注意:这个项目部分代码参考于 GSYVideoPlayer。

更新

使用重新打包的 so 文件,支持更多的视频格式。

感谢

项目地址

功能

  • 播放器的基础功能(播放,暂停,快进等等)
  • 支持列表播放,自动释放上一个播放器
  • 视频封面图设置
  • 提供两种视频全屏(设置屏幕的旋转方向和添加一个全屏的播放器)
  • 手势滑动改变播放进度,屏幕亮度和音量
  • 简单的 Wifi 网络检查
  • 使用 AndroidVideoCache 实现的视频缓存
  • 添加全屏播放器转场动画 (New)
  • 待续。。。

用法

在列表中使用,这里的代码是基于 RecyclerView 的:

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View contentView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_video, parent, false);
            ViewHolder viewHolder = new ViewHolder(contentView);
            viewHolder.controller = new MediaController(parent.getContext());
            viewHolder.controller.setEnableSlideBrightness(false);
            viewHolder.controller.setEnableSliderVolume(false);
            viewHolder.controller.setEnableSlidePosition(false);
//            viewHolder.controller.setFullScreenViewEnableSlideBrightness(false);
//            viewHolder.controller.setFullScreenViewEnableSlidePosition(false);
//            viewHolder.controller.setFullScreenViewEnableSliderVolume(false);
            viewHolder.controller.setFullScreenMode(MediaController.FULLSCREEN_VIEW);
            viewHolder.controller.setMute(true);
            viewHolder.controller.setShowBottomLayout(false);
            viewHolder.video.setMediaController(viewHolder.controller);
            mVideoWidth = parent.getContext().getResources().getDisplayMetrics().widthPixels;
            mVideoHeight = viewHolder.video.getLayoutParams().height;
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(final ViewHolder holder, int position) {
            holder.video.setVideoPath(VIDEO_URL);
            holder.video.setPlayPosition(position);
            holder.controller.setPlayPosition(position);
            holder.controller.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    holder.controller.toggleFullScreenView();
                }
            });
            if (holder.controller.getImgThumb() != null) {
                Glide
                        .with(holder.itemView.getContext())
                        .load(IMGS[position])
                        .apply(RequestOptions.centerCropTransform())
                        .into(holder.controller.getImgThumb());
            } else {
                Log.d(getClass().getSimpleName(), "Thumb ImgView is null");
            }

        }复制代码

这里需要注意的是,在列表中使用,需要开发者在 Item 不可见的时候,手动释放播放器,来节约内存。

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    autoPlay();
                }
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                if (IjkVideoManager.getInstance().getPlayPosition() > -1) {
                    int position = IjkVideoManager.getInstance().getPlayPosition();
                    if (!isVisible(position)) {
                        IjkVideoManager.getInstance().release();
                    }
                }
            }
        });复制代码

而在单个播放器的页面使用,则相对要简单一点:

        mIjkVideoView = (IjkVideoView) findViewById(R.id.video_view);
        MediaController mediaController = new MediaController(this);
        mediaController.setShowThumb(true);
        mIjkVideoView.setMediaController(mediaController);

        mIjkVideoView.setVideoPath("http://baobab.wdjcdn.com/14564977406580.mp4");复制代码

需要注意的地方是,不管是列表中使用,还是只是单个播放器,都需要在页面关闭时,手动调用释放播放器:

    @Override
    protected void onDestroy() {
        super.onDestroy();
        IjkVideoManager.getInstance().release();
    }

    @Override
    protected void onPause() {
        super.onPause();
        IjkVideoManager.getInstance().pause();
    }复制代码

更多代码可以参见项目。

有这方面需要的朋友可以自由复制属于我的代码,唯一希望就是能给我提点 Bug,或者有更好的实现,多谢。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue仿Bilibili视频播放器是一个使用Vue.js框架开发的仿制Bilibili播放器的项目。该播放器具有类似于Bilibili的界面设计和功能,可以实现视频的播放、弹幕、评论、点赞等功能。 该项目使用了Vue.js的组件化开发思想,将播放器分为多个组件,包括视频播放组件、弹幕组件、评论组件等。每个组件都有独立的功能和样式,可以高度复用。通过Vue.js的数据双向绑定和事件机制,实现了组件之间的数据传递和交互。 在实现视频播放功能时,使用了第三方库video.js,该库提供了强大的视频播放功能和跨平台兼容性。通过使用video.js,可以实现Bilibili播放器中的全屏、倍速播放、画面质量切换等功能。 为了实现弹幕功能,使用了第三方库danmaku.js。该库可以实现弹幕的发送、显示和管理。用户可以通过输入框发送弹幕,同时视频播放器会实时显示其他用户发送的弹幕。 评论功能使用了Vue.js的表单验证机制和axios库进行数据的提交和请求。用户可以输入评论内容,并提交给服务器进行保存。同时,用户可以查看其他用户的评论,并对其进行点赞或回复。 项目中的样式采用了Bilibili的设计风格,使用了CSS3的动画效果和过渡效果,使播放器更加流畅和美观。 总结起来,Vue仿Bilibili视频播放器是一个基于Vue.js框架开发的仿Bilibili播放器的项目,具备了视频播放、弹幕、评论、点赞等功能,通过使用Vue.js的组件化开发思想和相关插件,实现了类似Bilibili播放器的界面和功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值