video网络页面播放器: 组件video-player-vue和video.js 常用库

最新推荐文章于 2024-08-08 08:29:14 发布

阿东toastLi

最新推荐文章于 2024-08-08 08:29:14 发布

阅读量4.6k

点赞数 10

分类专栏： videojs vue-video-player 前端文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/toastRouter/article/details/124670854

版权

videojs 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue-video-player

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

网页放置视频播放器，一般都是用video.js(h5也使用过)和它的插件vue-video-player；

正常情况下对于简单的视频 video.js够用了，支持H5和flash视频播放；播放RTMP 视频流

一、vue-video-player组件

1 、安装

npm install vue-video-player --save

2、引入使用

（1）全局引入
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
//播放rtmp视频
import 'videojs-flash'
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
  
Vue.use(VideoPlayer)


（2）组件内部引入使用
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
export default {
 components: {
 videoPlayer
 }
}

3 demo 实例和一些配置

<!--
 * 视频流媒体 在组件内部使用eg:
-->
<template>
    <div class="videoBox">

        <h1>vue-video-player组件</h1>
        <div class='demo'>
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOption"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)">
            </video-player>
        </div>
    </div>
</template>

<script>
    // 1 组件内引入使用
    import { videoPlayer } from 'vue-video-player'
    import 'vue-video-player/src/custom-theme.css';
    import 'video.js/dist/video-js.css';
    export default {
        components: {
            videoPlayer
        },
        data() {
            return {
                page: 0,
                logFiles: [],
                logItems: [],
                activeFileIndex: -1,
                videoUrl: 'https://preapiconsole.71360.com/file/read/www/M00/1C/6A/wKj0f2Jnmp6AMZimATsJKfmM44Y535.mp4', // 视频url地址
                recordDay: 0,
                // 播放器的配置1 或者放到计算属性中
                playerOptions: {
                  
                }
            }
        },
        computed: {
            logContent() {
                return this.$store.state.log
            },
            // 2配置优先放置计算属性中，便于配置
            playerOption() {
                let options = {
                    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                    autoplay: false, // 如果为true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 是否视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4", // 类型
                        src: this.videoUrl // url地址
                    }],
                    poster: '', // 封面地址
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true, // 当前时间和持续时间的分隔符
                        durationDisplay: true, // 显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间功能
                        fullscreenToggle: true // 是否显示全屏按钮
                    }
                }
                return options
            }
        },

        methods: {
            // 播放回调
            onPlayerPlay(player) {
                console.log('player play!', player)
            },

            // 暂停回调
            onPlayerPause(player) {
                console.log('player pause!', player)
            },

            // 视频播完回调
            onPlayerEnded($event) {
                console.log("player", $event);
            },

            // // DOM元素上的readyState更改导致播放停止
            onPlayerWaiting($event) {
                console.log("player", $event)
            },

            // // 已开始播放回调
            // onPlayerPlaying($event) {
            //     // console.log(player, $event)
            // },

            // // 当播放器在当前播放位置下载数据时触发
            // onPlayerLoadeddata($event) {
            //     // console.log(player, $event)
            // },

            // // 当前播放位置发生变化时触发。
            // onPlayerTimeupdate($event) {
            //     // console.log(player, $event)
            // },

            // //媒体的readyState为HAVE_FUTURE_DATA或更高
            // onPlayerCanplay(player) {
            //     // console.log('player Canplay!', player)
            // },

            // //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
            // onPlayerCanplaythrough(player) {
            //     // console.log('player Canplaythrough!', player)
            // },

            // //播放状态改变回调
            // playerStateChanged(playerCurrentState) {
            //     console.log('player current update state', playerCurrentState)
            // },

            // //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
            // playerReadied(player) {
            //     console.log('example player 1 readied', player);
            // }

        },

    }
</script>

<style scoped>
    .videoBox {
        width: 1280px;
        /* height: calc(100vh -150px); */
    }

    .demo {
        width: 100%;
    
    }
</style>

二、video.js 库的使用配置

Video.js 是一个开源的 HTML5 jQuery 视频插件，这个插件可以用来处理 Flash 视频，它还是一个多平台支持的产品。具体方法、属性配置查看：js插件---videojs中文文档详解

1 安装video.js ：

videojs6xx以上的版本已经移除了flash，所以需要我们手动安装flash播放器;

npm install video.js --save

// 需要flash推流 安装videojs-flash; 

npm install videojs-flash --save //安装

import  "videojs-flash"  //在我们要使用的文件中导入就行

2 引用使用main js：

// 1mainjs 引入使用
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

3 demo实例代码

<!--
 * 视频流媒体
-->
<template>
    <div class="video_box">
        <video id="myVideo"
               ref="myVideo"
               class="video-js"
               @play="onPlayerPlay($event)"
               @pause="onPlayerPause($event)"
               @ended="onPlayerEnded($event)">
            <source :src="videoUrl"
                    type="video/mp4">
        </video>
    </div>

</template>

<script>

    export default {
        name: "Video",
        data() {
            return {
                videoUrl: 'https://preapiconsole.71360.com/file/read/www/M00/1C/28/wKj0f2JhGGaAJl2XAFQW2DBDH6k321.mp4', // 视频url地址
            };
        },
        mounted() {
            this.initVideo();  //初始化视频播放器
        },
        methods: {
            initVideo() {
                //初始化视频方法
                const videoDom = this.$refs.myVideo
                let options = {
                    //是否显示控制栏
                    controls: true,
                    //是否自动播放,muted:静音播放
                    autoplay: false,
                    //是否静音播放
                    muted: false,
                    //是否流体自适应容器宽高
                    fluid: true,
                    //设置视频播放器的显示宽度（以像素为单位）
                    width: "1280px",
                    //设置视频播放器的显示高度（以像素为单位）
                    height: "800px",
                    // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: "16:9",

                    language: "zh-CN",
                    // 可选的播放速度
                    playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0],
                    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    poster:
                        "https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799", // 封面地址
                    controlBar: {
                        timeDivider: true, // 当前时间和持续时间的分隔符
                        durationDisplay: true, // 显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间功能
                        fullscreenToggle: true, // 是否显示全屏按钮
                    },
                }
                let myPlayer = this.$video(videoDom, options);
                myPlayer.ready(function () {
                    //视频播放器初始化完成后的回调函数，this代表当前播放器，可以在这进行一系列的操作（myPlayer为我视频播放器对象）
                    myPlayer.play();  //播放
                    myPlayer.pause(); //暂停
                    myPlayer.currentTime(120); //自定义修改当前进度

                    myPlayer.volume(0.2); //设置视频音量大小
                    myPlayer.width(640); //设置视频的宽度
                    myPlayer.height(200);  //设置视频高度
                    myPlayer.size(640, 480); //同时设置视频高宽
                    myPlayer.enterFullScreen(); //视频全屏显示
                    myPlayer.enterFullScreen(); //视频退出全屏显示


                })
            },
            methods: {
                // 播放回调
                onPlayerPlay(player) {
                    console.log('player play!', player)
                },

                // 暂停回调
                onPlayerPause(player) {
                    console.log('player pause!', player)
                },

                // // 视频播完回调
                onPlayerEnded() {
                    console.log("player")
                },

                // // DOM元素上的readyState更改导致播放停止
                // onPlayerWaiting($event) {
                //     console.log(player)
                // },

                // // 已开始播放回调
                // onPlayerPlaying($event) {
                //     console.log(player)
                // },

                // // 当播放器在当前播放位置下载数据时触发
                // onPlayerLoadeddata($event) {
                //     console.log(player)
                // },

                // // 当前播放位置发生变化时触发。
                // onPlayerTimeupdate($event) {
                //     console.log(player)
                // },

                // //媒体的readyState为HAVE_FUTURE_DATA或更高
                // onPlayerCanplay(player) {
                //     // console.log('player Canplay!', player)
                // },

                // //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
                // onPlayerCanplaythrough(player) {
                //     // console.log('player Canplaythrough!', player)
                // },

                // //播放状态改变回调
                // playerStateChanged(playerCurrentState) {
                //     console.log('player current update state', playerCurrentState)
                // },

                // //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
                // playerReadied(player) {
                //     console.log('example player 1 readied', player);
                // }

            },
        }
    };
</script>

<style scoped  >
    .video_box {
        width: 1280px;
        margin: 0 auto;
        /* height: 800px; */
        height: calc(100vh -150px);
        position: relative;
    }
    video:focus {
        outline: 0;
    }
    .video_box .video-js >>> .vjs-big-play-button {
        /*对播放按钮的样式进行设置*/
        width: 100px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 200;
    }
</style>