vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能

更新時間：2022年12月01日 10:56:54 作者：ws_code_csdn

本次需求是做一個視頻列表，點擊視頻列表播放對應視頻；同時要求實現(xiàn)斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧

1. 安裝依賴

npm i -S video.js

2.入口文件引入js和樣式文件

// main.js (入口文件中引入js和樣式文件)
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
 
// 如果需要可以注冊為vue全局方法
Vue.prototype.$video = videojs;

3.開始封裝video組件

<!-- 視頻播放組件 -->
 
<template>
    <video
    ref="videoPlayer"
    class="video-js"
    >
 
    </video>
</template>
<script>
export default {
    name: 'VideoPlayer',
    props: {
        // 視頻播放地址
        url: {
            type: String,
        }
    },
    data () {
        return {
            // 視頻實例
            player: null,
        }
    },
    methods: {
        // 改變視頻播放地址
        changeVideoSrc (src) {
            this.player.src([{
                src,
                type: 'video/mp4'
            }])
        },
    },
    mountd () {
        // 初始化視頻
        // this.$video 就是 videojs, 文件入口內已經全局注冊了
        this.player = this.$video(this.$refs.videoPlayer, {
            language: 'zh-CN', // 中文
            responsive: true,
            autoplay: false,
            preload: 'auto',
            playbackRates: [1, 1.5, 2],
            sources: [{
                src: this.url,
                type: 'video/mp4'
            }]
        }, () => {
            this.player.log('ready', this)
        })
    },
    beforeDestory () {
        this.player && this.player.dispose();
    },
    
}
</script>

4.測試視頻組件是否正常

// 父組件中引入視頻組件
 
<VideoPlayer :url="url">
 
// 這里可以寫個固定的地址測試一下視頻組件能否播放
// 注意：不能是本地視頻。比如是服務器上的視頻才可以播放。

【失敗信息】-- 通常就是code為4. 大概意思就是因為視頻格式和網(wǎng)絡原因不能播放。這有幾個原因：

1.視頻格式不正確。要求是type是MP4，而請求播放的視頻不是MP4格式。

2.網(wǎng)絡不同或者跨域。這種錯誤很常見且隱秘。需要看看播放地址是否能正常訪問，或者該視頻地址是不是存在跨域（corss origin）?？缬蚓陀么恚芎媒鉀Q，不在追敘。

【漢化失敗】

明明設置了language為中文，但是結果還是英文。這里有個問題，videojs不會自動引入語言包，需要我們自行引入中文語言包。找到語言包，單獨拿出來，放在src目錄下，在入口文件中引入即可。

方法：node_moudles下找打videojs.dist/lang/zh-cn.js，如下圖，

找到zh-cn.js,單獨復制出來，放進src的js文件夾下。

當然，這時候還要再這個js文件中引入video.js,

然后在入口文件引入這個語言包即可漢化成功。

5.視頻列表切換視頻播放

// 視頻列表代碼比較簡單不再寫了  直接寫切換方法
 
// 比如在父組件中  
<VideoPlayer ref="players" />
 
<!-- 視頻切換列表 -->
 
<li
v-for="video in videos"
:key="video.id"
@click="changeVideoSource(video)"
>{{ 視頻名稱 }}</li>
 
 
// 視頻切換方法
changeVideoSource (video) {
    this.$refs.players.changeVideoSrc(video.src);
},

至此，完成視頻切換播放功能。

6.斷點續(xù)傳的插件

使用了下邊這個斷點續(xù)傳的插件

GitHub - gaoyuyue/MyUploader: 單文件上傳，多文件上傳，大文件上傳，斷點續(xù)傳，文件秒傳，圖片上傳

首先，我們需要自行安裝plupload。因為上邊組件基于此組件封裝的。

npm i -S plupload

然后，引入上邊github項目中的如下幾個文件：

這四個文件引入自己項目中去即可。

【上傳地址】

url就是上傳地址。

【上傳參數(shù)】

可以在這里定義上傳所需參數(shù)，

up.setOption("multipart_params", {
            
            "size":file.size,
            "md5":file.md5,
            filename: 'hahaha',
            id: '123456',
            // .......
        });

至此，視頻播放與視頻上傳基本完成。要多看文檔，多實踐。

到此這篇關于vue+videojs視頻播放、視頻切換、視頻斷點分段上傳的文章就介紹到這了,更多相關vue videojs視頻播放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: