前端使用EasyPlayer.js 在浏览器播放编码格式为h265的视频

简介我就不多说了, 支持h264, h265,ACC编码格式, 支持HTTP,FLV,HLS/M3U8等等, 大家自己去看吧,链接在这:https://www.npmjs.com/package/@easydarwin/easywasmplayer?activeTab=readme

下面进入正题:

我是在vue2 中使用的,所以,

第一步: npm 版本标注在后面了,

1.  npm install @easydarwin/easyplayer --save            // ^5.0.5
2.  npm install @easydarwin/easywasmplayer --save        // ^4.0.13

第二部:

copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下

copy node_modules/@easydarwin/easywasmplayer/EasyPlayer-lib.min.js 到项目public目录下

copy node_modules/@easydarwin/easywasmplayer/EasyPlayer-component.min.js 到项目public目录下

第三部: 新建一个vue文件, 局部引入:

import EasyPlayer from "@easydarwin/easyplayer";
  components: { EasyPlayer },

第四部: 在html中使用

 <EasyPlayer
      :videoUrl="videoUrl"
      :aspect="aspect"
      :live="true"
      :fluent="fluent"
      :autoplay="autoplay"
      stretch
      style="position: absolute"
      :muted="false"
    ></EasyPlayer>

在data里面:(在网上找的m3u8的视频链接也是可以正常播放的)

 autoplay: true,
      aspect: "16:9",
      fluent: true,
      player: "",
      videoUrl: "http://127.0.0.1:1123/staic/media/output.mp4",
// videoUrl: "https://mgtv.sd-play.com/20221128/gH2acdGr/index.m3u8",

这样就可以了!

这里记第一个小坑, output.mp4文件时通过ffmpeg工具 aac转hevc的, 但是转的时候遇到一个报错,The encoder 'aac' is experimental but experimental codecs are not enabled, add '-strict -2' if you want to use it. 意思就是编码器"acc" 是实验性的,但实验性编码器没有启用,如果你想使用它,请这样做 add '-strict -2', 你以为是没有安装什么插件?还是少了什么东西? 你以为在命令行输入add '-strict -2' 回车就大功告成了? 告诉你,木的用!! 命令行是需要这么写

ffmpeg -i ./12.mp4 -strict -2 -vcodec hevc output.mp4

加在输入文件后面!!

这里记第二个小坑, 以上弄完了, 运行后发现只有声音,没有图像!! 怎么回事呢? 声音也有,也能正常播放暂停,怎么就没有图像呢? 百度,bing搜半天一无所获. 最后F12检查代码的时候, 突然觉得是不是css样式的原因, 因为代码中的父级元素我并没有给宽高, 原始样式给的是position:relative, 改为:position:absolute. 果然可以了!!!!

前端使用EasyPlayer.js 在浏览器播放编码格式为h265的视频

下面进入正题:

猜你喜欢