devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

videoJS 视频 + 独一无二皮肤 + mp4/m3u8_video.js 好看的样式

作者：空白诗007 | 2024-07-06 08:51:41

赞

踩

video.js 好看的样式

推荐和参考文章：

video.js调用-腾讯云开发者社区-腾讯云>  一、总结（点击显示或隐藏总结内容）一句话总结：网上有各种细致的现成的代码可以拿来用，没必要自己死专1、video.js有两种初始化方式？一种是在video的html标签之中一种是使用jicon-default.png?t=N7T8https://cloud.tencent.com/developer/article/1649057?from=15425video.js的使用，打造自定义视频播放器 - 简书温馨提示：在HTML5中，video标签本身有个自定义属性playbackRate[https://www.w3school.com.cn/tags/av_prop_play...icon-default.png?t=N7T8https://www.jianshu.com/p/3b38f795616f 

 

  1. <template>
  2.   <div>
  3.     <el-button
  4.       @click="openDialog('http://ai-xxxxx4.m3u8', 1)"
  5.       type="primary">Open Video 1 (.m3u8)</el-button>
  6.     <el-button
  7.       @click="openDialog('http://xxxxx4.mp4', 2)"
  8.       type="primary">Open Video 2 (.mp4)</el-button>
  9.     <el-button @click="openDialog('', 3)" type="primary">Unable to play.</el-button>
  10.     <el-button @click="openDialog('http://txax-vssod.cdn.xxxx/8888/', 3)" type="primary">err Link</el-button>
  11.  
  12.     <el-dialog v-if="showDialog" :visible.sync="showDialog" :title="'Video ' + currentPlayerId" @close="closeDialog"
  13.       width="720px" class="video-dialog">
  14.       <div v-if="videoError">
  15.         <p>{{ videoError }}</p>
  16.       </div>
  17.       <video :id="'videoPlayer' + currentPlayerId" :class="videoClass" style="width: 100%;" controls preload="auto"
  18.         :width="videoWidth">
  19.       </video>
  20.     </el-dialog>
  21.   </div>
  22. </template>
  23.  
  24. <script>
  25. import videojs from 'video.js';
  26. import 'video.js/dist/video-js.css';
  27.  
  28. export default {
  29.   data() {
  30.     return {
  31.       showDialog: false,
  32.       currentPlayerId: null,
  33.       videoPlayer: null,
  34.       videoError: null,
  35.       videoWidth: '720px', // Default width
  36.       videoHeight: '450px', // Default height
  37.       videoClass: 'video-js vjs-default-skin vjs-big-play-centered' // Default class
  38.     };
  39.   },
  40.   methods: {
  41.     openDialog(url, playerId) {
  42.       this.showDialog = true;
  43.       this.currentPlayerId = playerId;
  44.       this.videoError = null;
  45.       // Wait for next tick to ensure the element is mounted before initializing Video.js
  46.       this.$nextTick(() => {
  47.         this.initVideoPlayer(url);
  48.         this.replacePlaybackRateText();
  49.       });
  50.     },
  51.     closeDialog() {
  52.       if (this.videoPlayer) {
  53.         this.videoPlayer.dispose();
  54.         this.videoPlayer = null;
  55.       }
  56.       this.showDialog = false;
  57.       this.currentPlayerId = null;
  58.       this.videoError = null;
  59.     },
  60.     initVideoPlayer(url) {
  61.       this.videoPlayer = videojs('videoPlayer' + this.currentPlayerId, {
  62.         html5: {
  63.           hls: {
  64.             overrideNative: true
  65.           }
  66.         },
  67.         playbackRates: [0.5, 0.75, 1.0, 1.25, 1.5, 2],
  68.         language: 'zh-CN' // 指定使用的语言为中文
  69.       });
  70.  
  71.       this.videoPlayer.on('error', (error) => {
  72.         console.error('Video playback error:', error);
  73.         this.videoError = 'Unable to play the video.';
  74.       });
  75.  
  76.       const type = this.getVideoType(url);
  77.  
  78.       if (type === 'video/mp4') {
  79.         this.videoPlayer.src({
  80.           src: url,
  81.           type: 'video/mp4'
  82.         });
  83.       } else if (type === 'application/x-mpegURL') {
  84.         this.videoPlayer.src({
  85.           src: url,
  86.           type: 'application/x-mpegURL'
  87.         });
  88.       }
  89.  
  90.       this.videoPlayer.ready(() => {
  91.         // 忽略未使用的变量
  92.         /* eslint-disable no-unused-vars */
  93.         // const videoEl = document.getElementById('videoPlayer' + this.currentPlayerId);
  94.         // const aspectRatio = this.videoPlayer.videoWidth() / this.videoPlayer.videoHeight();
  95.         // this.videoWidth = 720;
  96.         // this.videoHeight = this.videoWidth / aspectRatio;
  97.         // videoEl.style.height = `${this.videoHeight}px`;
  98.         this.videoPlayer.play();
  99.       });
  100.  
  101.     },
  102.     getVideoType(url) {
  103.       const extension = url.toLowerCase().includes('.mp4') ? 'mp4' : 'm3u8';
  104.       if (extension === 'mp4') {
  105.         return 'video/mp4';
  106.       } else if (extension === 'm3u8') {
  107.         return 'application/x-mpegURL';
  108.       } else {
  109.         return '';
  110.       }
  111.     },
  112.     replacePlaybackRateText() {
  113.       const playbackRateButton = document.querySelector('.vjs-playback-rate .vjs-playback-rate-value');
  114.       if (playbackRateButton) {
  115.         playbackRateButton.textContent = '倍速'; // 替换原始文本为“倍速”
  116.       }
  117.     }
  118.   },
  119.   beforeDestroy() {
  120.     if (this.videoPlayer) {
  121.       this.videoPlayer.dispose();
  122.       this.videoPlayer = null;
  123.     }
  124.   },
  125. };
  126.  
  127. // 在加载 Video.js 播放器之前，添加以下代码
  128. videojs.addLanguage('zh-CN', {
  129.   'Playback Rate': '倍速'
  130. });
  131. </script>
  132.  
  133. <style>
  134. /* Add any custom styles for the video player here */
  135. .video-dialog {
  136.   .el-dialog__header {
  137.     border-bottom: none;
  138.   }
  139.  
  140.   .el-dialog__body {
  141.     padding: 0;
  142.   }
  143.  
  144.   /*
  145.   .dialog-content {
  146.     padding:0 40px;
  147.   }
  148.   .el-dialog__footer {
  149.     padding: 10px 10px 10px;
  150.     border-top: none;
  151.   } */
  152. }
  153. </style>
  154.  
  155. <style>
  156.  
  157. .video-js button{
  158.   outline: none;
  159. }
  160. .video-js.vjs-fluid,
  161. .video-js.vjs-16-9,
  162. .video-js.vjs-4-3{ /* 视频占满容器高度 */
  163.   height: 100%;
  164.   background-color: #161616;
  165. }
  166. .vjs-poster{
  167.   background-color: #161616;
  168. }
  169.  
  170. .vjs-paused .vjs-big-play-button,
  171. .vjs-paused.vjs-has-started .vjs-big-play-button {
  172.   display: block;
  173. }
  174.  
  175. .video-js .vjs-big-play-button { /* 中间大的播放按钮 */
  176.   font-size: 2.5em;
  177.   line-height: 2.3em;
  178.   height: 2.5em;
  179.   width: 2.5em;
  180.   -webkit-border-radius: 2.5em;
  181.   -moz-border-radius: 2.5em;
  182.   border-radius: 2.5em;
  183.   /* background-color: #73859f; */
  184.   background-color: rgba(115, 133, 159, .5);
  185.   border-width: 0.15em;
  186.   margin-top: -1.25em;
  187.   margin-left: -1.75em;
  188. }
  189.  
  190. .video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
  191.   display: block;
  192. }
  193. .video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
  194.   display: none;
  195. }
  196.  
  197. /* 中间的播放箭头 */
  198. .vjs-big-play-button .vjs-icon-placeholder {
  199.   font-size: 1.63em;
  200. }
  201.  
  202. /* 加载圆圈 */
  203. .vjs-loading-spinner {
  204.   font-size: 2.5em;
  205.   width: 2em;
  206.   height: 2em;
  207.   border-radius: 1em;
  208.   margin-top: -1em;
  209.   margin-left: -1.5em;
  210. }
  211.  
  212. /* 点击屏幕播放/暂停 */
  213. /* .video-js.vjs-playing .vjs-tech {
  214.     pointer-events: auto;
  215. } */
  216.  
  217. /* 进度显示当前播放时间 */
  218. /*
  219.   video.js 默认倒序显示时间，也就是视频播放的剩余时间。
  220.   要显示当前的播放时间，以及总共视频时长，加2行CSS解决
  221. */
  222.  
  223. .video-js .vjs-time-control {
  224.   display: block;
  225.   padding-top: 1px;
  226. }
  227. .video-js .vjs-remaining-time {
  228.   /* display: block;
  229.   padding-top: 1px; */
  230.   display: none;
  231. }
  232.  
  233. /* 进度条背景色 */
  234. /* 播放进度条背景色 */
  235. .video-js .vjs-play-progress {
  236.   /* 设置播放进度条的背景色为绿色 */
  237.   background-color: #26A69A;
  238. }
  239.  
  240. /* 音量条背景色 */
  241. .video-js .vjs-volume-level {
  242.   /* 设置音量条的背景色为蓝色 */
  243.   /* background-color: #2196f3; */
  244.   background-color: #00aeec;
  245. }
  246.  
  247. .vjs-mouse-display .vjs-time-tooltip{
  248.   padding-bottom: 6px;
  249.   background-color: #26A69A;
  250. }
  251.  
  252. .video-js .vjs-play-progress .vjs-time-tooltip{
  253.   display: none!important;
  254. }
  255. /*
  256. .vjs-button > .vjs-icon-placeholder:before{ // 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 
  257.   font-size: 18px;
  258.   line-height: 1.7;
  259. }*/
  260. </style>
  261.  
  262. <style>
  263. .video-js .vjs-playback-rate .vjs-playback-rate-value {
  264.   line-height: 2.4;
  265.   font-size: 10px;
  266.   padding: 4px ;
  267. }
  268.  
  269. /* 为菜单项添加上下间距 */
  270. .video-js .vjs-playback-rate .vjs-menu-item-text {
  271.   font-size: 10px;
  272. } 
  273.  
  274. /* 鼠标离开时恢复透明度为1，字体颜色为蓝色 */
  275. .video-js .vjs-playback-rate .vjs-menu-item.vjs-selected {
  276.   opacity: 1;
  277.   background-color: rgba(0, 0, 0, 0);
  278.   color: #00aeec;
  279. }
  280.  
  281.  
  282. /* 鼠标悬停时将文字设置为蓝色 */
  283. .video-js .vjs-playback-rate .vjs-menu-item:hover .vjs-menu-item-text {
  284.   /* color:#00aeec; */
  285. }
  286.  
  287. /* 鼠标悬停时和选中时候整体透明度减轻 */
  288. .video-js .vjs-playback-rate .vjs-menu-item:hover,
  289. .video-js .vjs-playback-rate .vjs-selected {
  290.   opacity: 0.7;
  291. }
  292.  
  293. /* 隐藏垂直滚动条 */
  294. .video-js .vjs-playback-rate .vjs-menu-content {
  295.   overflow-y: hidden;
  296. }
  297.  
  298. /* 隐藏水平滚动条 */
  299. .video-js .vjs-playback-rate .vjs-menu-content {
  300.   overflow-x: hidden;
  301. }
  302.  
  303. </style> 
  304.

改良版：

  1. <template>
  2.     <div>
  3.         <el-button @click="openDialog('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', 1)" type="primary">Open Video 1 (.m3u8)</el-button>
  4.         <el-button @click="openDialog('https://media.w3.org/2010/05/sintel/trailer.mp4', 2)" type="primary">Open Video 2 (.mp4)</el-button>
  5.         <el-button @click="openDialog('', 3)" type="primary">Unable to play.</el-button>
  6.         <el-button @click="openDialog('http://txax-vssod.cdn.xxxx/8888/', 3)" type="primary">err Link</el-button>
  7.  
  8.         <el-dialog v-if="showDialog" :visible.sync="showDialog" :title="'Video ' + currentPlayerId" @close="closeDialog" width="720px" class="video-dialog">
  9.             <div v-if="videoError">
  10.                 <p>{{ videoError }}</p>
  11.             </div>
  12.             <video :id="'videoPlayer' + currentPlayerId" :class="videoClass" style="width: 100%;" controls preload="auto" :width="videoWidth"></video>
  13.         </el-dialog>
  14.     </div>
  15. </template>
  16.  
  17. <script>
  18. import videojs from 'video.js';
  19. import 'video.js/dist/video-js.css';
  20. import '@/js/customTimeDisplay'
  21.  
  22. export default {
  23.     data() {
  24.         return {
  25.             showDialog: false,
  26.             currentPlayerId: null,
  27.             videoPlayer: null,
  28.             videoError: null,
  29.             videoWidth: '720px', // Default width
  30.             videoHeight: '450px', // Default height
  31.             videoClass: 'video-js vjs-default-skin vjs-big-play-centered', // Default class
  32.             sourceTypes: {
  33.                 'video/mp4': 'video/mp4',
  34.                 'application/x-mpegURL': 'application/x-mpegURL'
  35.             },
  36.         };
  37.     },
  38.     methods: {
  39.         openDialog(url, playerId) {
  40.             this.showDialog = true;
  41.             this.currentPlayerId = playerId;
  42.             this.videoError = null;
  43.             // Wait for next tick to ensure the element is mounted before initializing Video.js
  44.             this.$nextTick(() => {
  45.                 this.initVideoPlayer(url);
  46.             });
  47.         },
  48.         closeDialog() {
  49.             if (this.videoPlayer) {
  50.                 this.videoPlayer.dispose();
  51.                 this.videoPlayer = null;
  52.             }
  53.             this.showDialog = false;
  54.             this.currentPlayerId = null;
  55.             this.videoError = null;
  56.         },
  57.         initVideoPlayer(url) {
  58.             this.videoPlayer = videojs('videoPlayer' + this.currentPlayerId, {
  59.                 html5: {
  60.                     hls: {
  61.                         overrideNative: true
  62.                     }
  63.                 },
  64.                 playbackRates: [0.5, 0.75, 1.0, 1.25, 1.5, 2],
  65.                 language: 'zh-CN' // 指定使用的语言为中文
  66.             });
  67.  
  68.             // 添加 Video.js 插件功能：设置时间显示格式为 HH:MM:SS
  69.             // 应用自定义时间格式显示插件
  70.             this.videoPlayer.customTimeFormat();
  71.  
  72.  
  73.             this.videoPlayer.on('error', (error) => {
  74.                 console.error('Video playback error:', error);
  75.                 this.videoError = 'Unable to play the video.';
  76.             });
  77.  
  78.             const type = this.getVideoType(url);
  79.             if (this.sourceTypes[type]) {
  80.                 this.videoPlayer.src({
  81.                     src: url,
  82.                     type: this.sourceTypes[type]
  83.             });
  84. }
  85.  
  86.             this.videoPlayer.ready(() => {
  87.                 this.videoPlayer.play();
  88.             });
  89.         },
  90.         getVideoType(url) {
  91.             const extension = url.toLowerCase().includes('.mp4') ? 'mp4' : 'm3u8';
  92.             if (extension === 'mp4') {
  93.                 return 'video/mp4';
  94.             } else if (extension === 'm3u8') {
  95.                 return 'application/x-mpegURL';
  96.             } else {
  97.                 return '';
  98.             }
  99.         }
  100.     },
  101.     beforeDestroy() {
  102.         if (this.videoPlayer) {
  103.             this.videoPlayer.dispose();
  104.             this.videoPlayer = null;
  105.         }
  106.     }
  107. };
  108.  
  109. // 在加载 Video.js 播放器之前，添加以下代码
  110. videojs.addLanguage('zh-CN', {
  111.     'Playback Rate': '倍速'
  112. });
  113. </script>
  114.  
  115. <style>
  116. /* Add any custom styles for the video player here */
  117. .video-dialog {
  118.     .el-dialog__header {
  119.         border-bottom: none;
  120.     }
  121.  
  122.     .el-dialog__body {
  123.         padding: 0;
  124.     }
  125. }
  126. </style>
  127.  
  128. <style>
  129. .video-js button {
  130.     outline: none;
  131. }
  132.  
  133. .video-js.vjs-fluid,
  134. .video-js.vjs-16-9,
  135. .video-js.vjs-4-3 {
  136.     /* 视频占满容器高度 */
  137.     height: 100%;
  138.     background-color: #161616;
  139. }
  140.  
  141. .vjs-poster {
  142.     background-color: #161616;
  143. }
  144.  
  145. .vjs-paused .vjs-big-play-button,
  146. .vjs-paused.vjs-has-started .vjs-big-play-button {
  147.     display: block;
  148. }
  149.  
  150. .video-js .vjs-big-play-button {
  151.     /* 中间大的播放按钮 */
  152.     font-size: 2.5em;
  153.     line-height: 2.3em;
  154.     height: 2.5em;
  155.     width: 2.5em;
  156.     -webkit-border-radius: 2.5em;
  157.     -moz-border-radius: 2.5em;
  158.     border-radius: 2.5em;
  159.     /* background-color: #73859f; */
  160.     background-color: rgba(115, 133, 159, .5);
  161.     border-width: 0.15em;
  162.     margin-top: -1.25em;
  163.     margin-left: -1.75em;
  164. }
  165.  
  166. .video-js.vjs-paused .vjs-big-play-button {
  167.     /* 视频暂停时显示播放按钮 */
  168.     display: block;
  169. }
  170.  
  171. .video-js.vjs-error .vjs-big-play-button {
  172.     /* 视频加载出错时隐藏播放按钮 */
  173.     display: none;
  174. }
  175.  
  176. /* 中间的播放箭头 */
  177. .vjs-big-play-button .vjs-icon-placeholder {
  178.     font-size: 1.63em;
  179. }
  180.  
  181. /* 加载圆圈 */
  182. .vjs-loading-spinner {
  183.     font-size: 2.5em;
  184.     width: 2em;
  185.     height: 2em;
  186.     border-radius: 1em;
  187.     margin-top: -1em;
  188.     margin-left: -1.5em;
  189. }
  190.  
  191. /* 点击屏幕播放/暂停 */
  192. /* .video-js.vjs-playing .vjs-tech {
  193.       pointer-events: auto;
  194.   } */
  195.  
  196. /* 进度显示当前播放时间 */
  197. /*
  198.     video.js 默认倒序显示时间，也就是视频播放的剩余时间。
  199.     要显示当前的播放时间，以及总共视频时长，加2行CSS解决
  200.   */
  201.  
  202. .video-js .vjs-time-control {
  203.     display: block;
  204.     padding-top: 1px;
  205. }
  206.  
  207. .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  208.   padding-right: 0 !important;
  209. }
  210.  
  211.  
  212. .video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  213.   padding-left: 0 !important;
  214. }
  215.  
  216. .video-js .vjs-remaining-time {
  217.     /* display: block;
  218.     padding-top: 1px; */
  219.     display: none;
  220. }
  221.  
  222. /* 进度条背景色 */
  223. /* 播放进度条背景色 */
  224. .video-js .vjs-play-progress {
  225.     /* 设置播放进度条的背景色为绿色 */
  226.     /* background-color: #26A69A; */
  227.     /* background-image: linear-gradient(to right, #58dae8, #00aeec) !important; */
  228.     background-image: linear-gradient(to right, #e89e58, #ec6a00) !important;
  229. }
  230.  
  231. /* 音量条背景色 */
  232. .video-js .vjs-volume-level {
  233.     /* 设置音量条的背景色为蓝色 */
  234.     /* background-color: #2196f3; */
  235.     /* background-color: #00aeec; */
  236.     /* background-image: linear-gradient(to right, #58dae8, #00aeec) !important; */
  237.     background-image: linear-gradient(to right, #e89e58, #ec6a00) !important;
  238. }
  239.  
  240. .vjs-mouse-display .vjs-time-tooltip {
  241.     padding-bottom: 6px;
  242.     background-color: #e48847;
  243. }
  244.  
  245. .video-js .vjs-play-progress .vjs-time-tooltip {
  246.     display: none !important;
  247. }
  248.  
  249. /*
  250.   .vjs-button > .vjs-icon-placeholder:before{ // 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 
  251.     font-size: 18px;
  252.     line-height: 1.7;
  253.   }*/
  254. </style>
  255.  
  256. <style>
  257. .video-js .vjs-playback-rate .vjs-playback-rate-value {
  258.     line-height: 2.4;
  259.     font-size: 10px;
  260.     padding: 4px;
  261. }
  262.  
  263. /* 为菜单项添加上下间距 */
  264. .video-js .vjs-playback-rate .vjs-menu-item-text {
  265.     font-size: 10px;
  266. }
  267.  
  268. /* 鼠标离开时恢复透明度为1，字体颜色为蓝色 */
  269. .video-js .vjs-playback-rate .vjs-menu-item.vjs-selected {
  270.     opacity: 1;
  271.     background-color: rgba(0, 0, 0, 0);
  272.     color: #00aeec;
  273. }
  274.  
  275. /* 鼠标悬停时将文字设置为蓝色 */
  276. .video-js .vjs-playback-rate .vjs-menu-item:hover .vjs-menu-item-text {
  277.     /* color:#00aeec; */
  278. }
  279.  
  280. /* 鼠标悬停时和选中时候整体透明度减轻 */
  281. .video-js .vjs-playback-rate .vjs-menu-item:hover,
  282. .video-js .vjs-playback-rate .vjs-selected {
  283.     opacity: 0.7;
  284. }
  285.  
  286. /* 隐藏垂直滚动条 */
  287. .video-js .vjs-playback-rate .vjs-menu-content {
  288.     overflow-y: hidden;
  289. }
  290.  
  291. /* 隐藏水平滚动条 */
  292. .video-js .vjs-playback-rate .vjs-menu-content {
  293.     overflow-x: hidden;
  294. }
  295. </style>
  296. <style>
  297. /* 隐藏默认的进度条控制滑块 */
  298. .video-js .vjs-progress-control .vjs-play-progress.vjs-slider-bar:before {
  299.     width: 0;
  300.     height: 0;
  301.     background: none;
  302.     border: none;
  303. }
  304.  
  305. /* 设置自定义图标作为进度条控制滑块 */
  306. .video-js .vjs-progress-control .vjs-play-progress.vjs-slider-bar:before {
  307.     width: 20px;
  308.     height: 20px;
  309.     background-image: url('@/assets/huya.png');
  310.     background-size: cover;
  311.     background-position: center; /* 将背景图像居中显示 */
  312.     content: '';
  313.     display: block;
  314.     position: absolute;
  315.     top: 50%;
  316.     /* left: 0; */
  317.     transform: translateY(-50%);
  318. }
  319.  
  320. </style>
  • customTimeDisplay.js
  1. import videojs from 'video.js';
  2.  
  3. // 注册自定义插件
  4. videojs.registerPlugin('customTimeFormat', function () {
  5.     var player = this;
  6.  
  7.     player.ready(function () {
  8.         // 获取当前时间显示控件和总时间显示控件
  9.         var currentTimeDisplay = player.controlBar.getChild('currentTimeDisplay');
  10.         var durationDisplay = player.controlBar.getChild('durationDisplay');
  11.  
  12.         // 监听时间更新事件
  13.         player.on('timeupdate', function () {
  14.             updateTimeDisplay(currentTimeDisplay, player.currentTime());
  15.         });
  16.  
  17.         // 监听总时间加载完成事件
  18.         player.on('durationchange', function () {
  19.             updateTimeDisplay(durationDisplay, player.duration());
  20.         });
  21.     });
  22.  
  23.     // 更新时间显示函数
  24.     function updateTimeDisplay(displayComponent, timeInSeconds) {
  25.         var formattedTime = formatTime(timeInSeconds);
  26.         displayComponent.el().textContent = formattedTime;
  27.     }
  28.  
  29.     // 格式化时间函数
  30.     function formatTime(time) {
  31.         var hours = Math.floor(time / 3600);
  32.         var minutes = Math.floor((time % 3600) / 60);
  33.         var seconds = Math.floor(time % 60);
  34.  
  35.         // 格式化成 HH:MM:SS
  36.         var formattedTime = (hours < 10 ? '0' + hours : hours) + ':' +
  37.             (minutes < 10 ? '0' + minutes : minutes) + ':' +
  38.             (seconds < 10 ? '0' + seconds : seconds);
  39.  
  40.         return formattedTime;
  41.     }
  42. });
  43.  
  44. export default videojs;

 

 

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号