• 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       //  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          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>
  • 相关阅读:
    第15.26节 PyQt(Python+Qt)入门学习:Model/View架构中的便利类QListWidget详解
    第二十一章、 Model/View便利类列表部件QListWidget详解
    PyQt(Python+Qt)学习随笔:QListWidget的信号简介
    iis日志存放位置 及 查看方法
    如何查看和分析IIS日志
    IIS网站设置禁止IP访问设置方法
    修改php默认的FastCGI模式为ISAPI模式的方法
    VPS/云主机CPU占用100%故障排查
    APACHE服务器httpd.exe进程占用cpu100%的解决方法
    httpd.exe占用100%CPU
  • 原文地址:https://www.cnblogs.com/shun1015/p/15309294.html
Copyright © 2020-2023  润新知