The front end uses EasyPlayer.js to play the video encoded in h265 format in the browser

I won’t say much about the introduction. It supports h264, h265, ACC encoding formats, HTTP, FLV, HLS/M3U8, etc. You can check it out yourself. The link is here: https://www.npmjs.com/package/ @easydarwin/easywasmplayer?activeTab=readme

Enter the topic below:

I am using it in vue2, so,

Step 1: The npm version is marked in the back,

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

Part Two: 

copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js to the project public directory

copy node_modules/@easydarwin/easywasmplayer/EasyPlayer-lib.min.js to the project public directory

copy node_modules/@easydarwin/easywasmplayer/EasyPlayer-component.min.js to the project public directory

Part 3: Create a new vue file and import it locally:

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

Part 4: Use in html

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

In the data: (the m3u8 video link found on the Internet can also be played normally)

 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",

that's it!

Here is the first small pit , the output.mp4 file was converted from aac to hevc through the ffmpeg tool, but an error was reported when converting, The encoder 'aac' is experimental but experimental codecs are not enabled, add '-strict -2 ' if you want to use it.   It means that the encoder "acc" is experimental, but the experimental encoder is not enabled, if you want to use it, please add '-strict -2', you think it is not installed What plug-in? Or is there something missing? Do you think you’re done by typing add '-strict -2' on the command line and pressing Enter? Let me tell you, it’s useless!! The command line needs to be written like this  

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

Added after the input file!!


Here is the second small hole . After finishing the above, after running, I found that there is only sound, but no image!! What's going on? There is also sound, and it can be played and paused normally. Why is there no image? Baidu and bing searched for a long time and found nothing. Finally When I checked the code with F12, I suddenly felt that it was because of the css style, because I didn’t give width and height to the parent element in the code, and the original style gave position:relative, and changed it to: position:absolute. Sure enough , it works !! !!

Guess you like

Origin blog.csdn.net/weixin_39891473/article/details/128316381