vue中使用西瓜视频api

https://v2.h5player.bytedance.com/en/api/

1 npm install xgplayer

1     <div id="mse"></div>
2     <div id="box"></div>

  1 <script>
  2 import Player from "xgplayer";
  3
  4 export default {
  5   name: "home",
  6   data() {
  7     return {
  8       player: null,
  9     };
 10   },
 11   mounted() {
 12     this.player = new Player({
 13       id: "mse", //或者 el:document.querySelector('#mse'),
 14       url: "/api/feiyunzhixia.mp4", //视频源
 15       definitionActive: 'hover', //修改清晰度控件的触发方式（hover或click）   player.emit() 方法
 16       playNext: {
 17         urlList: ["url1", "url2", "url3"], //下一集
 18       },
 19       download: true, //设置download控件显示
 20       autoplay: false, //目前大多数浏览器厂商不建议播放器自动播放视频，开发者对此有特殊需求时可通过该配置项打开
 21       volume: 0, //播放器预设音量大小。 0 - 1
 22       // poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",  //封面图
 23       playsinline: false,
 24       playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
 25       // width: 600,
 26       // height: 337.5,
 27       fluid: true, //流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化
 28       // fitVideoSize: 'auto'  //自适应视频内容宽高
 29       loop: true, //循环播放
 30
 31       // lastPlayTime: 20, //视频起播时间（单位：秒） 记忆播放   播放器支持设置视频起播时间。
 32       // lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
 33
 34       rotate: {
 35         //视频旋转按钮配置项
 36         innerRotate: true, //只旋转内部video
 37         clockwise: true, // 旋转方向是否为顺时针
 38       },
 39       rotateFullscreen: true, //样式横屏全屏
 40
 41       danmu: {
 42         comments: [
 43           //弹幕数组
 44           {
 45             duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
 46             id: "1", //弹幕id，需唯一
 47             start: 3000, //弹幕出现时间，毫秒
 48             prior: true, //该条弹幕优先显示，默认false
 49             color: true, //该条弹幕为彩色弹幕，默认false
 50             txt: "长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕", //弹幕文字内容
 51             style: {
 52               //弹幕自定义样式
 53               color: "#ff9500",
 54               fontSize: "20px",
 55               border: "solid 1px #ff9500",
 56               borderRadius: "50px",
 57               padding: "5px 11px",
 58               backgroundColor: "rgba(255, 255, 255, 0.1)",
 59             },
 60             mode: "top", //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
 61             // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt
 62             // eventListeners: [{ //支持自定义DOM设置DOM监听事件
 63             //   event: 'click',
 64             //   listener: function (e) {
 65             //     console.log('click')
 66             //   },
 67             //   useCapture: false,
 68             // }]
 69           },
 70         ],
 71         area: {
 72           //弹幕显示区域
 73           start: 0, //区域顶部到播放器顶部所占播放器高度的比例
 74           end: 1, //区域底部到播放器顶部所占播放器高度的比例
 75         },
 76         closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
 77         defaultOff: true, //开启此项后弹幕不会初始化，默认初始化弹幕
 78       },
 79
 80       pip: true, //  画中画
 81       miniplayer: true, //mini小窗
 82       miniplayerConfig: {
 83         bottom: 200,
 84         right: 0,
 85         width: 320,
 86         height: 180,
 87       },
 88       // cssFullscreen: true,  // #网页样式全屏 样式全屏功能不会隐藏当前浏览器的标签栏，导航栏，只是在当前页面内部全屏显示。
 89       screenShot: {
 90         // 截图功能支持用户对当前视频播放窗口进行即时截屏，截图尺寸即为当前视频播放窗口的尺寸，截图默认为 .png 格式
 91         saveImg: true,
 92         quality: 0.92,
 93         type: "image/png",
 94         format: ".png",
 95       },
 96       // 支持用户在线预览本地视频。
 97       preview: {
 98         uploadEl: document.querySelector("#box"),
 99       },
100       // progressDot: [
101       //   {
102       //     time: 10, //展示标记的时间
103       //     text: "标记文字", //鼠标hover在标记时展示的文字
104       //     duration: 8, //标记段长度（以时长计算）
105       //     style: {
106       //       //标记样式
107       //       background: "blue",
108       //     },
109       //   },
110       //   {
111       //     time: 22,
112       //     text: "标记文字",
113       //   },
114       //   {
115       //     time: 56,
116       //     duration: 8,
117       //   },
118       //   {
119       //     time: 76,
120       //   },
121       // ],
122       keyShortcutStep: {
123         //键盘快捷键：按 → 键快进10秒， 按 ← 键后退10秒，按 ↑ 键调高音量，按 ↓ 键调低音量，按 space 键切换播放/暂停状态
124         currentTime: 15, //播放进度调整步长，默认10秒
125         volume: 0.2, //音量调整步长，默认0.1
126       },
127       controls: true, //关闭控制条  播放器控制条由播放/暂停、定位、音量、全屏切换等元素
128       controlsList: ['nodownload'], // 选择关闭部分控制条选项可以通过配置controlsList选项实现。 参考值：['nodownload','nofullscreen','noremoteplayback']
129     });
130
131     this.player.emit('resourceReady', [{name: '高清', url: '/api/feiyunzhixia.mp4'}, {name: '超清', url: '/api/feiyunzhixia.mp4'}]);
132
133   },
134   methods: {},
135 };
136 </script>