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

news/2024/11/17 0:18:19/

需求

要使用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视频到底要怎么在线播放呀,哭了
等解决了这个问题,再来写篇博客


http://www.ppmy.cn/news/735651.html

相关文章

HMS Core Discovery直播预告 | AI画质增强 ,开启超清视界

【直播入口】 B站华为开发者联盟:http://live.bilibili.com/22551651 4K、8K视频屡见不鲜,HD、FHD分辨率成小屏标配,当网络卡顿、视频自动切换到较低画质时,用户最迫切需要的莫过于将“马赛克视频”变得清晰流畅。 致力于打造“…

视频画质如何提高?视频画质主要由哪些因素决定?

网络、屏幕素质以及视频成像技术的突飞猛进让用户对视频画质的要求越来越高。视频的画质究竟取决于哪些因素,以及如何改善和提高视频画质? 视频画质的影响因素主要有片源质量、视频码率、视频的编码协议、视频分辨率等等。 视频分辨率 目前绝大多数正…

挑选几款开源的、优秀的H.265网页播放器,进行特征整理及使用评价

H265和H264都是视频编码规范,H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少。之前由于终端支持有限,h265的推广使用一直较为缓慢,最…

540p秒变1080p!小红书端侧实时超分带你免流量玩嗨短视频

小红书在短视频领域首次联合华为HMS Core大规模运用端侧超分技术实现了“同等网络环境下高画质”、“同等画质下省带宽、降卡顿”的体验效果。 在整个落地的过程中小红书与HMS Core做到了联合共建,先后解决了多实例超分、不同View类型(SurfaceView、Text…

关于程序员必备的算法

关于程序员必备的算法 在程序员的职业生涯中,他们会邂逅无数种算法,每种算法都有其独特的用途和应用场景。但是,有一些算法是必备的,它们在程序员的日常工作中起着至关重要的作用。本文将介绍五个十分重要的“必抓!”算…

相交区间合并

校门外的树 #include<iostream> #include<algorithm>using namespace std;typedef pair<int, int> PII; #define x first #define y secondconst int N 110;int n, m; PII q[N];int main() {cin >> n >> m;for(int i0; i<m; i) cin >>…

螺丝钉拧不下来了怎么办

如果螺丝钉拧不下来&#xff0c;可以尝试以下方法&#xff1a; 使用加力工具&#xff1a;如扳手或钳子&#xff0c;加大力量。 涂抹润滑剂&#xff1a;如油剂或锯末&#xff0c;让螺丝钉更容易拧下。 用锤敲打&#xff1a;用轻锤敲打螺丝钉周围的物体&#xff0c;增加螺丝钉的容…

面试造飞机,工作拧螺丝

来自&#xff1a;菜鸟教程 不知道大家有没这样的经历&#xff0c;面试的时候各种高深的提问&#xff0c;算法&#xff0c;数据结构、服务器架构&#xff0c;是否有高并发经验&#xff0c;入职后做的工作&#xff0c;就是做一个登陆功能&#xff0c;后台添加几个表单&#xff0c…