前端使用hls方式播放h265(HEVC)格式的.ts在线文件,附vue2.x封装h265web.js

手机游戏开发者 2024-9-27 11:17:56 78 0 来自 中国
接上一篇h265web.js 同时播放多个视频,修改官方example 中player.js并重新编译,这里使用vue2.x封装最新版本h265web.js  v20220916 tag 【注意: 反面有新版本了,tag v20220916之前的版本内存溢出我只想到定时革新页面来办理,之后的版本未曾实验过,自行测试】
也就是这个:


实在h265web.js作者在demo中提供了vue demo的,如下:


分别是Vue Cli 和 Vite创建的,这都不是重点,重点是demo内里的播放器很大略,可以看到内里都是简朴的播放停息,而且没有样式。

如许对于初学者来说不敷友好,有没有一个能用的哦,我只想复制粘贴。。。

4.png 来来来,各位看官看这里,拿走不谢,也渴望大家多多分享自己的学习心得,让厥后的同砚们少走弯路。
这里提一下啊,大家写文章的时间要确保精确而且要联合自己的感悟,偶尔候看别人的博客写得没头没尾的,而且有的相互copy,点开都是一样的内容,有的代码拿来也跑不起来,各种报错。。。真的很浪费时间啊喂。
扯远了,本文这里实在是联合上篇文章【见文章开头】的v20211204 tag 中的example,简朴将html和css拿过来包装修改,改成vue中的版本,并带上视频底部controller。末了页面效果如下:



代码如下:

1.起首去官网下载最新h265web.js v20220916 tag ,下载后解压将dist目录中的文件复制到自己的项目中。


在index.html中引入missile.js

开始封装,这是我的文件目录:

2.组件封装代码如下,这里使用了elementui@2.7.2,vue@2.5.2
index.vue
<!--h265webjs 播放器,当前是下载官网的tag v20220916 版本,修改example中play.js后的版本只是修改了dom盒子的获取,源码是直接取的id定位,如许不能渲染多个视频盒子,因此把这部分代码改了--><template>  <div v-loading="loading"       element-loading-text=""       element-loading-spinner="el-icon-loading"       element-loading-background="transparent"       :class="['player-container',videoBoxClass]">    <!--  video dom-->    <div :id="config.player"3.使用:
h265webjs.vue
<template>  <div这里另有个注意点,切换视频源是用的v-if + $nextTick的方式,为了制止不须要的报错,实在我一开始是组件内部监听的方式,但反面由于报错还是改成了这种。

4.参数分析:


附github demo 地点

由于不止一个小同伴私下里找我了,这里还是贴上源码,可以直接运行方便看到效果。内里有两个版本,假如碰到最新版播放卡顿或内存溢出题目可暂时切换为低版本【内存溢出仍旧存在,作者后续看到issue并提交了一版,但我还没有机会验证】,该版本全屏报错题目已在代码中修复。

啰嗦一句

我提供的demo中内存溢出题目仍旧存在,只是低版本会好很多。当时我用的已经是最新版本tag v20220916了,末了我的办理方式选择低版本并“定时革新页面”开释内存。然后我给作者提了issue,不想定时革新的小同伴可以试下tag v20220916反面的版本,若题目仍旧存在可在github上向 h265web.js作者分析题目(我这边由于项目竣事缘故原由没机会再测试了)

14.png
若对你有资助,请点个赞吧,谢谢支持!
本文地点:https://www.jianshu.com/p/1f98a9b5e316,转载请注明出处,谢谢。
参考:
h265web.js github
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-22 01:08, Processed in 0.159571 second(s), 35 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表