• 售前

  • 售后

热门帖子
入门百科

利用vue-video-player实现直播的方式

[复制链接]
gnmpmnuy35327 显示全部楼层 发表于 2022-1-8 05:38:29 |阅读模式 打印 上一主题 下一主题
目次


  • 一、安装vue-video-player
  • 二、使用 vue-video-player
课前准备:直播流协议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:
  1. CDN方式,直接在html文件头部引入文件:
  2.   <link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
  3.   <script type="text/javascript" src="path/to/video.min.js"></script>
  4.   <script type="text/javascript" src="path/to/vue.min.js"></script>
  5.   <script type="text/javascript" src="path/to/dist/vue-video-player.js">
  6.   </script>
  7.     <script type="text/javascript"> Vue.use(window.VueVideoPlayer)
  8.   </script>
复制代码
安装方式2:
点击查看代码
  1. NMP安装插件:
  2.   npm install vue-video-player --save
  3.     npm install videojs-contrib-hls --save
  4. main.js中引入基础样式文件:
  5. // 引入videoPlayer样式
  6. import 'video.js/dist/video-js.css'
  7.    
  8. 按需引入:
  9. import 'videojs-contrib-hls'
  10. import { videoPlayer } from 'vue-video-player'
  11. components: {
  12.     videoPlayer
  13. },   
  14. 全局引入:
  15. import Vue from 'vue'
  16. import VueVideoPlayer from 'vue-video-player'
  17. // 自定义样式引入,在<video-player>添加对应类名,例如video-player-custom
  18. // import 'vue-video-player/src/custom-theme.css'
  19. Vue.use(VueVideoPlayer, /* {
  20.   options: 全局默认配置,
  21.    events: 全局videojs事件
  22. }*/)
复制代码
二、使用 vue-video-player
  1. <template>
  2.   <!-- playsinline:设置播放器在移动设备上不全屏[ Boolean, default: false ] -->
  3.   <!-- customEventName:自定义状态变更时的事件名[ String, default: 'statechanged' ] -->
  4.     <video-player
  5.     class="video-player-custom"
  6.         ref="videoPlayer"
  7.         :options="playerOptions"
  8.         :playsinline="true"
  9.         customEventName="customstatechangedeventname"
  10.         @play="onPlayerPlay"
  11.         @pause="onPlayerPause"
  12.         @ended="onPlayerEnded"
  13.         @ready="playerReadied"
  14.         @statechanged="playerStateChanged"
  15.         @playing="onPlayerPlaying"
  16.         @waiting="onPlayerWaiting"
  17.         @loadeddata="onPlayerLoadeddata"
  18.         @timeupdate="timeupdate"
  19.         @canplay="onPlayerCanplay"
  20.         @canplaythrough="onPlayerCanplaythrough">
  21.     </video-player>
  22. </template>
  23. <script>
  24. import 'videojs-contrib-hls'
  25. import { videoPlayer } from 'vue-video-player'
  26. export default {
  27.    components: {
  28.         videoPlayer
  29.     },
  30.   data() {
  31.     return {
  32.       playerOptions: {
  33.          // 是否静音
  34.                   muted: true,
  35.                   // 默认为英语,设置为中文
  36.                   language: 'zh-CN',
  37.                   // 播放速度,指定后Video.js将显示一个控件(vjs-playback-rate类的控件),允许用户选择播放速度
  38.                   playbackRates: [0.5, 1.0, 1.5, 2.0],
  39.                   // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值,表示长宽比例
  40.                   aspectRatio: '4:3',
  41.               // 兼容顺序,默认值是['html5'],其他已注册的技术将按其注册的顺序在该技术之后添加。
  42.                   techOrder: ['html5'],
  43.                   // 等同于原生<video>标签中的一组<source>子标签,可实现优雅降级;type 属性规定媒体资源的 MIME 类型
  44.                   sources: [
  45.                         //{
  46.                               //type: "video/mp4",
  47.                               //src: ""
  48.                           //},
  49.                         //{
  50.                               //type: "rtmp/flv",
  51.                               //src: ""
  52.                           //},
  53.                            {
  54.                                type: "application/x-mpegURL",
  55.                                src: "https://live.cgtn.com/1000/prog_index.m3u8"
  56.                            },
  57.                    ],
  58.                   // 视频封面
  59.                   poster: require('./icon/cover.jpg'), 
  60.        }
  61.     }
  62.   },
  63.   computed: {
  64.             //插件节点 用于添加自定义按钮事件
  65.     player() {
  66.       return this.$refs.videoPlayer.player
  67.     }
  68.   },
  69.     mounted() {},
  70.     methods: {
  71.         // 播放回调
  72.         onPlayerPlay(player) {
  73.         },
  74.         // 暂停回调
  75.         onPlayerPause(player) {
  76.           //console.log(player)
  77.         },
  78.         // 视频播放结束回调
  79.         onPlayerEnded(player) {
  80.           //console.log(player)
  81.         },
  82.         // DOM元素上的readyState更改导致播放停止
  83.         onPlayerWaiting(player) {
  84.           //console.log(player)
  85.         },
  86.         // 已开始播放回调
  87.         onPlayerPlaying(player) {
  88.           //console.log(player)
  89.         },
  90.         // 当播放器在当前播放位置下载数据时触发
  91.         onPlayerLoadeddata($event) {
  92.           //console.log($event)
  93.         },
  94.         // 当前播放位置发生变化时触发。
  95.         onPlayerTimeupdate($event) {
  96.           //console.log($event)
  97.         },
  98.         //媒体的readyState为HAVE_FUTURE_DATA或更高
  99.         onPlayerCanplay($event) {
  100.           //console.log($event)
  101.         },
  102.         //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
  103.         onPlayerCanplaythrough($event) {
  104.           //console.log($event)
  105.         },
  106.         //播放状态改变回调
  107.         playerStateChanged($event) {
  108.           //console.log($event)
  109.         },
  110.         //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
  111.         playerReadied($event) {
  112.           //console.log($event)
  113.         },
  114.     }
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .video-player-custom{
  119.     width: 100%;
  120.     height: 180px;
  121.     // vidoeUI重写
  122.     /deep/ .video-js{
  123.         width: 100%;
  124.         height: 100%;
  125.         padding: 0;
  126.         overflow: hidden;
  127.         // 播放器
  128.         .vjs-tech{
  129.           object-fit: cover;
  130.         }
  131.         // 播放按钮
  132.         .vjs-big-play-button {
  133.             position: absolute;
  134.             top: 50%;
  135.             left: 50%;
  136.             width: 2em;
  137.             height: 2em;
  138.             margin-top: -1em;
  139.             margin-left: -1em;
  140.             font-size: 2em;
  141.             line-height: 2em;
  142.             border-radius: 50%;
  143.             background-color: rgba(0,0,0,0.45);
  144.             outline: none;
  145.         }
  146.         // 封面
  147.         .vjs-poster{
  148.             width: 100%;
  149.             height: 100%;
  150.             background-size: cover;
  151.         }
  152.     }
  153. }  
  154. </style>
复制代码
到此这篇关于使用vue-video-player实现直播的文章就先容到这了,更多相关vue-video-player直播内容请搜刮草根技能分享以前的文章或继续浏览下面的相关文章盼望各人以后多多支持草根技能分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作