您当前的位置:首页 > 电脑百科 > 软件技术 > 软件技术

在浏览器也能享受H.265播放器的高清画面

时间:2022-01-20 11:48:50  来源:  作者:码农看看

喜欢研究视频的小伙伴,想必对H.265已经非常了解,作为ITU-T VCEG继H.264之后所制定的新的视频编码标准,H.265可以在有限带宽下传输更高质量的网络视频,仅需原先的一半带宽即可播放相同质量的视频。

但是实际运用上,很多WEB浏览器对H.265的解码播放支持的不是很好,所以呢,今天TJ君就给大家分享一个完整的开源Web版H.265播放器完善方法。

此方法基于JS码流解封装、WebAssembly(FFmpeg)视频解码,利用Canvas画布投影、AudioContext播放音频。深入简出,比较适合感兴趣的小伙伴进行学习交流和实际开发应用。

首先下载项目源代码,然后进行工程打包:

# 以下打包命令任选一
* npm run dev    # 运行开发环境
* npm run test   # 运行测试环境
* npm run build  # 打包正式环境
* rollup -c      # 打包csj与esm版本

配置Nginx server:

server {
    listen       8000;
    location / {
        root   <path of goldvideo>/goldvideo;
        index  index.html index.htm;
        autoindex on;
    }
}

然后重启Nginx,此时访问如下地址:

http://localhost:8000/h265player/demo/demo.html

能正常播放视频的话就表示启动成功了。

那如何在实际页面上展示呢?可以在页面的head标签里面增加如下内容:

<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>
    .play-container {
        width: 800px;
        height: 500px;
    }
</style>

然后需要创建一个div,作为播放器的容器

<div class="play-container"></div>

最后新建一个GoldPlay实例对象,传入相应参数,就可以实现视频的播放

//播放器容器
let el = doc.querySelector('.play-container')
//播放器参数
let options = {
    // 视频播放地址
    sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',
    type: 'HLS'
    // wasm库地址
    libPath: 'http://localhost:8000/h265player/dist/lib',
}
let player = new GoldPlay(el, options}

整个项目分为四大模块、三大线程

分别是:

  • UI模块
  • Loader模块
  • 数据处理模块
  • 数据渲染模块
  • main主线程
  • 数据加载线程
  • 数据处理线程

其中主线程负责整体项目的界面、下载、数据流、音频、视频各方面的功能调度;数据加载线程,则对元数据进行各种请求;数据处理线程,则会完成最终的数据解封装和解码。

而解封和解码分别用到了demuxer模块通过JS实现视频数据的解封装,从而获取到独立的视频(H265)数据和音频(AAC)数据;通过ffmpeg实现H265数据的软解码,编译成wasm。

四大模块则会完成播放器的显示、图像的展示、按钮的排布、数据的请求加载、视屏和音频的渲染及同步。

如果是对视频感兴趣的小伙伴可以来看看这个项目:https://github.com/goldvideo/h265player

最后,记得关注我哟,带你看更多有意思的好用工具。



Tags:播放器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
喜欢研究视频的小伙伴,想必对H.265已经非常了解,作为ITU-T VCEG继H.264之后所制定的新的视频编码标准,H.265可以在有限带宽下传输更高质量的网络视频,仅需原先的一半带宽即可播...【详细内容】
2022-01-20  Tags: 播放器  点击:(15)  评论:(0)  加入收藏
今天小佳再分享一款支持全平台的视频播放器,支持几十种视频格式播放。 这款播放器叫GOM Player,是一款免费的影片播放器,支持播放视频和音乐,而且同时支援Windows 跟Mac 系统的...【详细内容】
2021-12-31  Tags: 播放器  点击:(23)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: 播放器  点击:(51)  评论:(0)  加入收藏
媒体爆料称:近期,老牌音乐播放器Winamp宣布回归,官方网站也大改后重新上线。官方表示:不只是简单更新而是全面重制。新的Winamp 将推出适用于 Windows、macOS 和移动平台的多合...【详细内容】
2021-11-26  Tags: 播放器  点击:(34)  评论:(0)  加入收藏
前言前段时间写的Python自制一款炫酷音乐播放器,有不少小伙伴私信我,对播放器提了不少改进建议,让我完善播放器的功能。今天音乐播放器2.0版本完成了,大家一起来看看是如何用pyt...【详细内容】
2021-09-29  Tags: 播放器  点击:(63)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: 播放器  点击:(112)  评论:(0)  加入收藏
首先说明一下开源软件有啥好处: 一、开源软件最重要的是为了解决实际问题,不是为了情怀和理想。开源软件是这样发展起来的:我要解决某个问题,然后开发出了一款软件,这个软件保密...【详细内容】
2021-05-25  Tags: 播放器  点击:(142)  评论:(0)  加入收藏
一、FFmpeg视频解码器1.视频解码知识1).纯净的视频解码流程压缩编码数据->像素数据。例如解码H.264,就是“H.264码流->YUV”。2).一般的视频解码流程视频码流一般存储在一定...【详细内容】
2021-05-19  Tags: 播放器  点击:(167)  评论:(0)  加入收藏
IT之家2月17日消息 外媒 9to5 Mac 报道,最近我们了解到,VLC 播放器将迎来重大更新,带来全新的、更现代化的 VLC 4.0 用户界面。但不幸的是,目前泄露的 Linux 版本并不好看。它确...【详细内容】
2021-02-18  Tags: 播放器  点击:(223)  评论:(0)  加入收藏
当我工作的时候,我会一直在后台播放音乐。大多数情况下,这些音乐是以黑胶唱片的形式在转盘上旋转。但有时我不想用这种单纯的方法听音乐时,我会选择听流媒体音频应用程序的方式...【详细内容】
2021-01-20  Tags: 播放器  点击:(196)  评论:(0)  加入收藏
▌简易百科推荐
电脑开机时总会自动启动一些软件,然后造成电脑开机卡慢,而对于我们每天都需要登录某些软件,就需要每天手动去开启这些软件,非常的繁琐,那我们怎样设置让电脑,关闭那些我们不需要自...【详细内容】
2022-01-27  MrSu苏玄    Tags:软件自启动   点击:(1)  评论:(0)  加入收藏
CAD常用快捷键大全,多使用快捷键,事半功倍。熟能生巧,记得多练习,看到了就练,看到了就练!常用快捷键 综合类快捷键 Ctrl快捷键及功能键 熟能生巧,记得多练习,看到了就练,看到...【详细内容】
2022-01-27  ANANdog    Tags:CAD   点击:(1)  评论:(0)  加入收藏
相信不少网友遇到过电脑无法访问文件的情况,最近就有网友反映自己的win10系统无法访问文件,提示windows无法访问指定设备路径或文件怎么解决。下面教下大家win10访问不了文件...【详细内容】
2022-01-26  老毛桃winpe    Tags:访问文件   点击:(3)  评论:(0)  加入收藏
很多小伙伴会发现一个问题,电脑使用的时间越久就会越来越卡,有时候开启浏览器都需要延迟,这是因为你的C盘内存不足所导致的,今天就来教大家如何彻底有效的清理爆满的C盘,让内存瞬...【详细内容】
2022-01-26  办公黑科技    Tags:C盘   点击:(3)  评论:(0)  加入收藏
在日常工作中,有时候为了提取图片中的文字,很多人都会选择将图片上的内容,一个字一个字地录入到Word中,费时费力不说,还总容易出错。其实用手机将图片拍下来,就能转换成Word文档,下...【详细内容】
2022-01-26  职场科技范    Tags:Word文档   点击:(3)  评论:(0)  加入收藏
1、系统初始化# 关闭防火墙systemctl stop firewalldsystemctl disable firewalld # 关闭selinuxsed -i &#39;s/enforcing/disabled/&#39; /etc/selinux/config #永久setenf...【详细内容】
2022-01-24  明日人生    Tags:apollo   点击:(4)  评论:(0)  加入收藏
在苹果生态中,不同的硬件产品之间可以实现非常方便的文件传输、剪贴板同步、甚至是备忘录、日历相册、浏览器记录等数据的同步。比如iPhone和MacBook之间想要传输某段文字、...【详细内容】
2022-01-21  Seek思科    Tags:同步互通   点击:(36)  评论:(0)  加入收藏
喜欢研究视频的小伙伴,想必对H.265已经非常了解,作为ITU-T VCEG继H.264之后所制定的新的视频编码标准,H.265可以在有限带宽下传输更高质量的网络视频,仅需原先的一半带宽即可播...【详细内容】
2022-01-20  码农看看    Tags:播放器   点击:(15)  评论:(0)  加入收藏
导读:谁的电脑硬盘中还不存有一些珍藏多年的学习资料,可为了保护它们各位学习爱好者也真的是煞费苦心,不管是层层文件夹“套娃”隐藏也好,修改文件名甚至修改后缀名也好,效果都是...【详细内容】
2022-01-20  极客小君    Tags:隐藏电脑文件   点击:(18)  评论:(0)  加入收藏
在磁盘管理中,您可以删除和调整分区大小以实现此目标。但是,为了保证数据安全,在采取进一步步骤之前,需要执行分区卷备份或文件备份。接下来,删除该分区以生成未分配的空间,然后,将...【详细内容】
2022-01-18  苏陌SUMO    Tags:合并分区   点击:(19)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条