vue在网页上播放h265编码的视频(内附github不能访问的解决办法)

需求

要使用vue进行h265编码的视频播放,包括m3u8格式的文件、mkv格式视频和av1封装的MP4视频
但是对于vue常用的播放插件如vue-video-player或者videojs,只支持h264编码的视频

解决过程

1、EasyPlayer.js
这个插件感觉应该是挺常用的,随便在网页上一搜h265视频播放,就蹦出这个

官方地址:https://github.com/tsingsee/EasyPlayer.js

在这里插入图片描述

基本上按照官方给的demo来,就能够集成成功

题外话:现在直接访问github会显示链接失败,可以使用镜像网站来进行访问GitHub镜像站

在这里插入图片描述
缺点:

  1. 但是这个插件也存在一些问题,比如不能支持mkv视频播放,不支持大码率如4k视频播放(4k视频就会绿屏)
  2. 并且,最重要最重要的是 一定要将html的demo放到自己的服务器上,否则播放不了视频,关于服务器怎么搭建,在demo里面有链接,这里放一个传送门https://blog.csdn.net/weixin_43194037/article/details/108885134
  3. 这个插件已经很久没有维护过了

2、h265web.js
也支持h265的m3u8格式的文件播放,支持mp4视频播放,同样不支持mkv格式视频播放

官方地址:https://github.com//numberwolf/h265web.js

这个插件比较新,但是不需要把demo放到服务器上运行,搭建起来个人觉得会比easyplayer.js简单
搭建过程官网上也写得很清楚了,直接照抄就好

缺点:

  1. 不支持4k,如果是4k视频(3840*2160),会报错,内存溢出

3、h265web.js
市场上能找到的支持的能力最多的HEVC/H.265网页播放器.
一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器

官方地址:https://github.com/numberwolf/h265web.js

在这里插入图片描述
在这里插入图片描述
官方也给出了demo直接抄就好了
缺点:

  1. 不支持4k

4、h265webplayer

官方文档 https://github.com/ksvc/h265webplayer

h265webplayer是金山云的Web端H.265视频播放器。

支持的功能

1、mp4格式的点播(音频需是aac格式的,其余音频格式待兼容)。

2、flv格式的直播。

后记

这四种插件,只要不播放4k这种大码率的视频,经过本人的实验,基本都是能成功的,选一个就好。
可是可是,4k视频到底要怎么在线播放呀,哭了
等解决了这个问题,再来写篇博客

猜你喜欢

转载自blog.csdn.net/qq_45634989/article/details/125170071
今日推荐