《前端攻城狮 · videojs 视频需求开辟》

各人好，我是 【战神刘玉栋】，有10多年的研发履历，致力于前后端技能栈的知识沉淀和传播。
  CSDN入驻不久，渴望各人多多支持，后续会继续提升文章质量，绝不滥竽凑数，接待多多交换。
  
  

写在前面的话

近期，博主朋侪必要开辟一个视频播放网站，就帮助提供了前后端框架模板，后端 SB、前端 Nuxt、配景管理 Vite，各种练手项目丢给他，原以为剩下业务，对方老步伐猿可以轻松搞定，没想到焦点视频播放这块就碰到不少坑，于是帮忙处理处罚了一下，顺道记载一篇博客。
此篇文章就先容一下，Video 关于视频开辟中的一些标题。
   Tips：君问归期未有期，巴山夜雨涨秋池。何当共剪西窗烛，却话巴山夜雨时。。
  <hr> 情况预备

1. 1、引入依赖
2. npm i videojs-contrib-hls --save
3. npm i video.js --save
5. 2、main.js引入CSS
6. import 'video.js/dist/video-js.css';
8. 3、页面引入组件
9. import videojs from'video.js';
10. import 'videojs-contrib-hls';

复制代码

页面示例

1. <template>
2.   <div>
3.     <video
4.       ref="videoPlayer"
5.       class="video-js vjs-default-skin"
6.       controls
7.       preload="auto"
8.       :data-setup="{}"
9.     >
10.       <source :src="src" type="video/mp4" />
11.     </video>
12.   </div>
13. </template>
15. <script>
16. import videojs from 'video.js'
17. import 'video.js/dist/video-js.css'
19. export default {
20.   props: {
21.     src: {
22.       type: String,
23.       required: true
24.     }
25.   },
26.   mounted() {
27.     this.player = videojs(this.$refs.videoPlayer)
28.   },
29.   beforeDestroy() {
30.     if (this.player) {
31.       this.player.dispose()
32.     }
33.   }
34. }
35. </script>
37. <style scoped>
38. /* 自定义视频播放器样式 */
39. </style>

复制代码

<hr> 移动端兼容

   形貌：由于视频网站要在多端运行，还担心移动端不太兼容，究竟发现主体功能都正常，就是各种IOS和安卓的奇葩标题不绝，好比进度条的拖动控制等，这里分享一些，剩下碰到了恣意去搜吧。

1. /* 使用 video::cue 伪元素自定义字幕样式，包括背景、字体颜色、字体大小、字体阴影和内边距等。自定义字幕样式 */
2. video::-webkit-media-text-track-display {
3.    
4.    
5.   background: transparent !important;
6. }
7. video::cue {
8.    
9.    
10.   background:

复制代码