/goldvideo-vue

将 goldvideo 封装为 Vue(v2) 组件, 上游项目[goldvideo/h265player](https://github.com/goldvideo/h265player)

Primary LanguageJavaScript

goldvideo-vue

本项目是对 goldvideo/h265player 的简单封装

⚠️ 暂未发布到 npm

usage

请参考 examples

  1. install
# v1 分支
yarn add git+ssh://git@github.com:SublimeCT/goldvideo-vue.git#v1
# main 分支
yarn add git+ssh://git@github.com:SublimeCT/goldvideo-vue.git

# or use npm
npm i git+ssh://git@github.com:SublimeCT/goldvideo-vue.git#v1
  1. 引入 goldvideo/h265player SDK, 参考 index.html
<link rel="stylesheet" href="../goldplay-h265.css">
<script src="../goldplay-h265-sdk.js"></script>

examples 中使用的编译好的 SDK, 也可以自行编译并引入

  1. 使用组件, 参考 App.tsx
import { H265Player } from 'goldvideo-vue'
Vue.component('h265-player', H265Player)
import { Component, Vue } from 'vue-property-decorator'
// import LOGO from '../src/assets/logo.png'
import { Sheets } from '@/components/H265Player/src/H265Player'

@Component
export default class App extends Vue {
    static defaultURL = 'https://omc3i.codesandbox.io/ts/playlist.m3u8'
    url = '' // 输入框中的地址
    options: GoldPlayOptions = {
        sourceURL: App.defaultURL,
        type: 'HLS',
        libPath: location.href + 'lib/',
    }
    sheets: Sheets = {
        width: '800px',
        height: '600px',
    }
    onFirstLoaded(evt: unknown) {
        console.log('first loaded!', evt)
    }
    render(): VueTsxSupport.JSX.Element {
        return <div id="app">
            <header style="display: flex;justify-content: center;">
                {/* <img src={ LOGO } alt="Vue logo"/> */}
                {/* <img src="https://github.com/goldvideo/h265player/blob/master/dist/image/goldvideo-logo-w.png" alt=""/> */}
                <h2>GoldVideo Vue</h2>
            </header>
            <main style="display: flex;justify-content: center;">
                <h265-player
                    options={ this.options }
                    sheets={ this.sheets }
                    onFirstLoaded={ this.onFirstLoaded }
                    debug={ true } />
            </main>
            <footer style="display: flex;justify-content: center;margin-top: 20px;">
                <div>
                    <span>URL:</span>
                    <input type="text" placeholder="video URL" style="width: 500px;margin: 0 20px;" v-model={ this.url } />
                    <button type="button" onClick={ evt => this.options.sourceURL = this.url }>update URL</button>
                </div>
            </footer>
        </div>
    }
}

修改 options.sourceURL 后播放器会自动更新

examples

examples

Components

<h265-player>

source

refer