亲宝软件园·资讯

展开

vue-video-player直播

镜兮 人气:0

课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html

摘要:在H5页面实现观看直播+视频回放;在开发期间使用过video.js、mui-player等插件,发现这些video插件对移动端的兼容性都不友好,最后发现一个在移动端兼容不错的插件——vue-video-player

场景:

移动端H5页面,项目是vue搭建的,使用的是HLS协议以m3u8结尾的直播流

一、安装vue-video-player

播放HLS视频流需要安装 videojs-contrib-hls插件,播放RTMP视频流则安装 videojs-flash插件,hls插件与flash插件同时使用时flash插件需要在hls插件之前引入;(资料上讲安装vue-video-player时会自动安装hls插件,实际操作中并没有,还是自己手动安装吧!)

安装方式1:

CDN方式,直接在html文件头部引入文件:
  <link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
  <script type="text/javascript" src="path/to/video.min.js"></script>
  <script type="text/javascript" src="path/to/vue.min.js"></script>
  <script type="text/javascript" src="path/to/dist/vue-video-player.js">
  </script>
    <script type="text/javascript"> Vue.use(window.VueVideoPlayer)
  </script>

安装方式2:

点击查看代码

NMP安装插件:
  npm install vue-video-player --save
    npm install videojs-contrib-hls --save

main.js中引入基础样式文件:
// 引入videoPlayer样式
import 'video.js/dist/video-js.css'
    

按需引入:
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'

components: {
    videoPlayer
},    
 
全局引入:
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player' 
// 自定义样式引入,在<video-player>添加对应类名,例如video-player-custom
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* { 
  options: 全局默认配置,
   events: 全局videojs事件
}*/)

二、使用 vue-video-player

<template>
  <!-- playsinline:设置播放器在移动设备上不全屏[ Boolean, default: false ] -->
  <!-- customEventName:自定义状态变更时的事件名[ String, default: 'statechanged' ] -->
    <video-player
    class="video-player-custom"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay"
        @pause="onPlayerPause"
        @ended="onPlayerEnded"
        @ready="playerReadied"
        @statechanged="playerStateChanged"
        @playing="onPlayerPlaying"
        @waiting="onPlayerWaiting"
        @loadeddata="onPlayerLoadeddata"
        @timeupdate="timeupdate"
        @canplay="onPlayerCanplay"
        @canplaythrough="onPlayerCanplaythrough">
    </video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
   components: {
        videoPlayer
    },
  data() { 
    return {
       playerOptions: { 
         // 是否静音
                  muted: true,
                  // 默认为英语,设置为中文
                  language: 'zh-CN',
                  // 播放速度,指定后Video.js将显示一个控件(vjs-playback-rate类的控件),允许用户选择播放速度
                  playbackRates: [0.5, 1.0, 1.5, 2.0],
                  // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值,表示长宽比例
                  aspectRatio: '4:3',
              // 兼容顺序,默认值是['html5'],其他已注册的技术将按其注册的顺序在该技术之后添加。
                  techOrder: ['html5'],
                  // 等同于原生<video>标签中的一组<source>子标签,可实现优雅降级;type 属性规定媒体资源的 MIME 类型
                  sources: [
                        //{
                    	  //type: "video/mp4",
                    	  //src: ""
                  	//},
                        //{
                    	  //type: "rtmp/flv",
                    	  //src: ""
                  	//},
                   	{
                     	  type: "application/x-mpegURL",
                     	  src: "https://live.cgtn.com/1000/prog_index.m3u8"
                   	},
                   ],
                  // 视频封面
                  poster: require('./icon/cover.jpg'), 
       }
    }
  },
  computed: { 
    	//插件节点 用于添加自定义按钮事件
    player() { 
      return this.$refs.videoPlayer.player 
    }
  },
    mounted() {},
    methods: {
        // 播放回调
        onPlayerPlay(player) {
        },
        // 暂停回调
        onPlayerPause(player) {
          //console.log(player)
        },
        // 视频播放结束回调
        onPlayerEnded(player) {
          //console.log(player)
        },
        // DOM元素上的readyState更改导致播放停止
        onPlayerWaiting(player) {
          //console.log(player)
        },
        // 已开始播放回调
        onPlayerPlaying(player) {
          //console.log(player)
        },
        // 当播放器在当前播放位置下载数据时触发
        onPlayerLoadeddata($event) {
          //console.log($event)
        },
        // 当前播放位置发生变化时触发。
        onPlayerTimeupdate($event) {
          //console.log($event)
        },
        //媒体的readyState为HAVE_FUTURE_DATA或更高
        onPlayerCanplay($event) {
          //console.log($event)
        },
        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
        onPlayerCanplaythrough($event) {
          //console.log($event)
        },
        //播放状态改变回调
        playerStateChanged($event) {
          //console.log($event)
        },
        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
        playerReadied($event) {
          //console.log($event)
        },
    }
}
</script>
<style lang="scss" scoped>
.video-player-custom{
    width: 100%;
    height: 180px;
    // vidoeUI重写
    /deep/ .video-js{
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        // 播放器 
        .vjs-tech{
          object-fit: cover;
        }
        // 播放按钮
        .vjs-big-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2em;
            height: 2em;
            margin-top: -1em;
            margin-left: -1em;
            font-size: 2em;
            line-height: 2em;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.45);
            outline: none;
        }
        // 封面
        .vjs-poster{
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }
}  
</style>

加载全部内容

相关教程
猜你喜欢
用户评论