当前位置:   article > 正文

vue中使用EasyPlayer播放监控视频HLS,H265、H264

easyplayer

1.使用npm下载依赖

npm  install  --save  easy-player

2.将EasyPlayer-lib.min.js文件、EasyPlayer.wasm文件、libDecoder.wasm文件放置到public下

3.创建components,html代码如下

  1. <template>
  2. <div class="player-box" :style="{ width: width, height: height }">
  3. <EasyPlayer
  4. style="width: 100%; height: 100%"
  5. :videoUrl="videoUrl"
  6. :showEnterprise="false"
  7. :show-custom-button="false"
  8. :autoplay="true"
  9. />
  10. </div>
  11. </template>

4.使用props接收数据

  1. props: {
  2. // 视频地址
  3. videoUrl: {
  4. type: String,
  5. default: "",
  6. },
  7. // 容器id
  8. id: {
  9. type: String,
  10. default: "",
  11. },
  12. // 容器宽度
  13. width: {
  14. type: [Number, String],
  15. default: "100%",
  16. },
  17. // 容器高度
  18. height: {
  19. type: [Number, String],
  20. default: "100%",
  21. },
  22. },

5.在父组件中引入,传递props中的数据即可运行即可

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/790735
推荐阅读
相关标签
  

闽ICP备14008679号