分享EasyPlayer的使用经验

前言

    行业内目前大多插件都还是只适用于h264视频流，刚好有项目用到了h265视频流。经过多方对比和实验，最终选择了EasyPlayer.js

一、EasyPlayer是什么？

EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。

二、使用步骤

1.引入库

npm install @easydarwin/easyplayer --save

2.vue集成

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

3.界面引用

（此代码是对播放器的引用进行封装，可自行根据需求进行更改）

<template>
    <div class="box">
        <easy-player live muted autoplay :video-url="src" style="width: 100%;height: 700px;"  @error="restartPlayer" :id="id" :has-audio="false" ref="easyPlayer" :video-title="title" />
    </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'

export default {
    components: {
        EasyPlayer
    },
    props: {
        src: {
            type: String
        },
        id: [String, Number],
        title: {
            type: String
        },
       
    },
    data() {
        return {
            player: null
        }
    },
    watch: {

    },
    computed: {},
    mounted() {
       
    },
    methods: {
        
    },
  


}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}

//视频进度工具栏的样式
::v-deep .vjs-live-display{
    line-height: 50px;
}
::v-deep .vjs-bitrate-control{
    line-height: 50px !important;
}
::v-deep .icon-luxiang2{
    display: none !important;
}
::v-deep .vjs-snapshot-control{
    display: none !important;
}
::v-deep .video-title{
    font-size: 14px;
    left: 5px !important;
    right: 0px !important;
    max-width:200px !important;
}
::v-deep .vjs-stretch-control{
    display: none !important;
}
::v-deep .vjs-icon-placeholder:before{
   font-size: 30px !important;
   line-height: 40px;
}
::v-deep .easy-player-loading{
    display: none !important;
}
</style>

 总结

         由于项目只是有播放h265视频的需求，所以我也只是简单了解使用，如果需要更深入了解可自行百度。