码迷,mamicode.com
首页 > 其他好文 > 详细

vue 视频播放Vue-Video-Player

时间:2019-08-22 12:57:56      阅读:1332      评论:0      收藏:0      [点我收藏+]

标签:spec   hls   idt   信息   auto   封面   结束   imp   lin   

官网地址:https://www.npmjs.com/package/vue-video-player

1.输入命令:

     npm install vue-video-player --save

                  npm install --save videojs-contrib-hls

2.全局引入--main.js:

    import VideoPlayer from ‘vue-video-player‘
    import ‘video.js/dist/video-js.css‘
    Vue.use(VideoPlayer)
3.页面对应的template文件:(想要引入的css有效,class名不能变)
  <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
  :options="playerOptions"></video-player>
4.页面对应的script文件:
  import "video.js/dist/video-js.css";
  import "vue-video-player/src/custom-theme.css";
  import "videojs-contrib-hls";
  
  playerOptions: {
    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,浏览器准备好时开始回放。
    controls: true, //控制条
    preload: "auto", //视频预加载
    muted: false, //默认情况下将会消除任何音频。
    loop: false, //导致视频一结束就重新开始。
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
    fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        src: "http://vjs.zencdn.net/v/oceans.mp4"
      }
    ],
    poster:
    "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
    width: document.documentElement.clientWidth,
    notSupportedMessage: "此视频暂无法播放,请稍后再试" //允许覆盖Video.js无法播放媒体源时显示的默认信息。
  },

vue 视频播放Vue-Video-Player

标签:spec   hls   idt   信息   auto   封面   结束   imp   lin   

原文地址:https://www.cnblogs.com/mcll/p/11393552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!