【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频

本文链接:【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频
相关文档:【JS&JQuery】videojs插件使用
相关文档:【Nuxt】四、VueX使用教程

1. 安装vue-video-player

官方安装及使用文档:https://www.npmjs.com/package/vue-video-player

1.1. 安装vue-video-player

npm install vue-video-player --save

1.2. 安装videojs-flash

npm install videojs-flash --save

1.3. 安装videojs-contrib-hls

npm install --save videojs-contrib-hls

2. vue.config.js中添加chainWebpack支持swf

chainWebpack: config => {
        config.module
            .rule('swf')
            .test(/\.swf$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 10000
            });
    },

3. 全局引用并使用中文语言包

在src>plugins中新建video.js文件,内容如下

3.1. video.js

import Vue from 'vue';

import VueVideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import hls from 'videojs-contrib-hls';//此处用const会报错

import Video from 'video.js';
import 'video.js/dist/video-js.css';

// import 'video.js/dist/lang/zh-CN.js';// vue中直接引用会报错
// import 'video.js/dist/lang/zh-CN.json';// 本文使用的videojs版本中dist无此文件,根据video.js/dist/lang/zh-CN.js新建了下面video-zh-CN.json文件
import zhCN from './video-zh-CN.json';

import 'videojs-flash';

import SWF_URL from 'videojs-swf/dist/video-js.swf';//此处用const会报错

Video.options.flash.swf = SWF_URL; // 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);

3.2. video-zh-CN.json

{
    "Play": "播放", 
    "Pause": "暂停", 
    "Current Time": "当前时间", 
    "Duration": "时长", 
    "Remaining Time": "剩余时间", 
    "Stream Type": "媒体流类型", 
    "LIVE": "直播", 
    "Loaded": "加载完毕", 
    "Progress": "进度", 
    "Fullscreen": "全屏", 
    "Non-Fullscreen": "退出全屏", 
    "Mute": "静音", 
    "Unmute": "取消静音", 
    "Playback Rate": "播放速度", 
    "Subtitles": "字幕", 
    "subtitles off": "关闭字幕", 
    "Captions": "内嵌字幕", 
    "captions off": "关闭内嵌字幕", 
    "Chapters": "节目段落", 
    "Close Modal Dialog": "关闭弹窗", 
    "Descriptions": "描述", 
    "descriptions off": "关闭描述", 
    "Audio Track": "音轨", 
    "You aborted the media playback": "视频播放被终止", 
    "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。", 
    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。", 
    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。", 
    "No compatible source was found for this media.": "无法找到此视频兼容的源。", 
    "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。", 
    "Play Video": "播放视频", 
    "Close": "关闭", 
    "Modal Window": "弹窗", 
    "This is a modal window": "这是一个弹窗", 
    "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。", 
    ", opens captions settings dialog": ", 开启标题设置弹窗", 
    ", opens subtitles settings dialog": ", 开启字幕设置弹窗", 
    ", opens descriptions settings dialog": ", 开启描述设置弹窗", 
    ", selected": ", 选择", 
    "captions settings": "字幕设定", 
    "Audio Player": "音频播放器", 
    "Video Player": "视频播放器", 
    "Replay": "重播", 
    "Progress Bar": "进度小节", 
    "Volume Level": "音量", 
    "subtitles settings": "字幕设定", 
    "descriptions settings": "描述设定", 
    "Text": "文字", 
    "White": "白", 
    "Black": "黑", 
    "Red": "红", 
    "Green": "绿", 
    "Blue": "蓝", 
    "Yellow": "黄", 
    "Magenta": "紫红", 
    "Cyan": "青", 
    "Background": "背景", 
    "Window": "视窗", 
    "Transparent": "透明", 
    "Semi-Transparent": "半透明", 
    "Opaque": "不透明", 
    "Font Size": "字体尺寸", 
    "Text Edge Style": "字体边缘样式", 
    "None": "无", 
    "Raised": "浮雕", 
    "Depressed": "压低", 
    "Uniform": "均匀", 
    "Dropshadow": "下阴影", 
    "Font Family": "字体库", 
    "Proportional Sans-Serif": "比例无细体", 
    "Monospace Sans-Serif": "单间隔无细体", 
    "Proportional Serif": "比例细体", 
    "Monospace Serif": "单间隔细体", 
    "Casual": "舒适", 
    "Script": "手写体", 
    "Small Caps": "小型大写字体", 
    "Reset": "重启", 
    "restore all settings to the default values": "恢复全部设定至预设值", 
    "Done": "完成", 
    "Caption Settings Dialog": "字幕设定视窗", 
    "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗", 
    "End of dialog window.": "结束对话视窗"
}

4. 在main.js中引入video.js文件

import './plugins/video';// 引入视频播放插件

5. 单页面中使用

如果没有需求,像 @ready="playerReadied"这些子传父的方法可以不写

<video-player
  class="vjs-custom-skin video-player"
  ref="videoPlayer"
  :options="playerOptions"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
></video-player>
data() {
        return {
            playerOptions: {
                techOrder: ['html5', 'flash'], // 兼容顺序,使用flash播放,可以播放flv格式的文件
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: true, // 如果true,浏览器准备好时开始回放
                notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
                sourceOrder: true,
                loop: false, // 导致视频一结束就重新开始。
                // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
                muted: true, // 默认情况下将会消除任何音频。
                language: 'zh-CN',
                // aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
                fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
                hls: true,  //启用hls?
                flash: {
                    hls: { withCredentials: false },
                    //swf: '/videojs/video-js.swf'//放在static或着public下面文件夹中的videojs文件夹中 当引入js文件中统一定义时此处可省略
                },
                html5: { hls: { withCredentials: false } },
                sources: [
                    {
                        type: 'video/mp4', // 资源格式写法:'video/mp4'
                        src: '/video/1.mp4' // 本地资源地址,注意:本地资源存放在public文件夹中,本文视频资源路径public/video/1.mp4
                    },
                    {
                        // withCredentials: true,
                        type: 'application/x-mpegURL', // hls
                        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
                    },
                    {
                        type:'rtmp/flv',//rtmp
                        src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
                    },
                    {
                        type: 'rtmp/flv',//rtmp
                        src: `rtmp://58.200.131.2:1935/livetv/hunantv`
                    },
                    {
                        type: 'rtmp/mp4', // 资源格式写法:'video/mp4'
                        src: 'rtmp://' // url地址
                    }
                ],
                poster: 'path', // 你的封面地址
                // width: document.documentElement.clientWidth,
                height: this.fileAreaHeight, // 设置高度,fluid需要设置成flase
                // 配置控制栏
                controlBar: {
                    volumePanel: {
                            inline: false,//音量调节是否水平
                    },
                    timeDivider: true, // 时间分割线
                    currentTimeDisplay:true,//当前播放位置
                    durationDisplay: true, // 总时间
                    progressControl: true, // 进度条
                    remainingTimeDisplay: false, // 剩余时间
                    fullscreenToggle: true // 全屏按钮
                }
            }
        };
    },

注意:computed中的这段必须要加上!!!
播放需要使用到 flash 时,浏览器的flash插件要允许运行

flash打开

mounted() {
    console.log('当前videojs对象', this.player);
    // this.player.play() // 播放
    // this.player.pause() // 暂停
    // this.player.src(src) // 重置进度条
},
computed: {
        player() {
            return this.$refs.videoPlayer.player;
        }
    },
methods: {
        // --------------------视频播放-开始-------------------- */
        // 初始化话播放-在onPlayerCanplay中调用
        initPlay(player) {
            console.log('initPlay>当前视频播放器实例对象', this.player);
            player.play();
        },

        /* 视频播放 */
        // 视频准备完毕
        playerReadied(player) {
            console.log('Readied>视频准备完毕!', player);
        },

        // 视频加载完成
        onPlayerLoadeddata(player) {
            console.log('Loadeddata>视频加载完成!', player);
        },

        // 可以播放视频
        onPlayerCanplay(player) {
            console.log('Canplay>可以播放视频!', player);
            // this.initPlay(player);
        },

        // 拖动视频条会触发事件-视频暂停>可以播放视频>可以播放视频至拖动位置>视频播放>视频加载中>可以播放视频>视频播放中>视频加载中>可以播放视频>视频播放中>视频加载中>可以播放视频>视频播放中>可以播放视频至拖动位置
        // 可以播放视频至拖动位置
        onPlayerCanplaythrough(player) {
            console.log('Canplaythrough>可以播放视频至拖动位置!', player);
        },

        // 视频播放
        onPlayerPlay(player) {
            console.log('Play>视频播放!', player);
        },

        // 视频播放中
        onPlayerPlaying(player) {
            console.log('Playing>视频播放中!', player);
        },

        // 视频时间更新中
        onPlayerTimeupdate(player) {
            // console.log('Timeupdate>视频时间更新中!', player);
        },

        // 视频暂停
        onPlayerPause(player) {
            console.log('Pause>视频暂停!', player);
        },

        // 视频加载中
        onPlayerWaiting(player) {
            console.log('Waiting>视频加载中!', player);
        },

        // 视频状态改变
        playerStateChanged(playerCurrentState) {
            console.log('StateChanged>视频状态改变', playerCurrentState);
        },

        // 视频播放结束
        onPlayerEnded(player) {
            console.log('Ended>视频播放结束!', player);
        }
        //切换视频
        playVideo(url) {
          if (url) {
            this.playerOptions.sources = [
              {
                type: 'video/mp4',
                autoplay: true,
                src: 'http://172.19.82.59:1234/test' // 本地资源地址,注意:本地资源存放在 static 文件夹中,本文视频资源路径 static/topicMaterial/1.mp4
              }
            ]; 
          } else {
            this.playerOptions.sources = [];
          }
        },

        // --------------------视频播放-结束-------------------- */
}

参考文档网址:
vue-video-player的使用总结
vue中使用video插件vue-video-player
vue-video-player语言设置
videoJs常用方法、事件、VUE中使用的注意事项
webpack与video.js一同使用的一些坑
nuxt中使用vue-video-player,以及hls实现(支持m3u8)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339