VUE integrates with the H265 web js player to automate webpack builds

Mondo Technology Updated on 2024-02-01

h265web.JS is a tool used in web browsers265 j**ascript ** machine. It supports decoding h. directly in the browser265 encoded streams for an efficient experience. Integrate H265Web. in your Element UI projectjs makes it easy for us to implement h265 of **features.

h265web.JS open source address:

Document address: ?tab=readme-ov-file

At present, Vue's H265Web. is integratedJS also has a certain level of complexity, which is described in detail in this article.

A ready-to-use element-ui project and development environment, this article is based on vue20 We take a direct ** dist approach instead of installing with npm, which is said to be less friendly to wasm (I don't have empirical evidence).

Go to the official website to find the latest version of releasae or pick up ** the entire project:

What needs to be followed is the contents of the dist directory.

This article refers to the implementation in the official directory example vue2, and mainly adds support for npm automated builds.

First, create a new template directory in your Vue project and organize your files as follows:

i.e. h265webThe dist directory of js should be copied to template libs h265web.

index.HTML is the template file used when building a Vue project, and it reads as follows:
When building with the npm command, index. is automatically generated in the public directory of the directory by defaultHTML file. But we need to add it in indexhtml to introduce h265webjs file, it is a bit cumbersome to add references after building, so customize this template page for easy construction. The purpose of this step is to automatically copy the library files of the h265 to the target directory of the build when npm builds.

The focus here is on plugins built using copy-webpack-plugin and html-webpack-plugin.

vue.config.js settings. 

This sentence is defined in moduleexports before const copywebpackplugin = require('copy-webpack-plugin') defines the template page location const htmlwebpackplugin = require('html-webpack-plugin') in moduleexports, add moduleexports = }plugins: [new htmlwebpackplugin(),new copywebpackplugin([
In this way, when you run npm run dev or npm run build:prod, the h265web library will be copied to the target static js directory.

The effect of executing the build command is as follows:

The path can be placed as you like, I put it here under src utils:

Contents:

const preset_config = }// fyi. the player class is a wrapper container provide the init and destory methods.// you should destory the player instance at the page unshift time.// by the way if you want to impl a progress bar you should view the normal_example.// it's a full example. this demo only provide a minimalist case.// why use class? convenient der is enough :)// should i registry the instnace at a microtask? of course.// pay attention to index.html. vite boy. don't forget import the static source code :)export class player ; instance; constructor(opt = {}= opt if (presetconfig) object.assign(this.#config, presetconfig) }init(url) }
This is used in dialogs, in the $nexttick() of the watch to create a **, which can be used in other events as needed. 

import from '@/utils/executor'watch: player.instance.onplayfinish = ()=> player.instance.do()
Elsewhere, call the playerinstance.

Running Effect:

Related Pages