index.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. import {
  2. defineComponent,
  3. nextTick,
  4. onMounted,
  5. onUnmounted,
  6. reactive,
  7. toRefs
  8. } from 'vue';
  9. // import 'plyr/dist/plyr.css';
  10. // import Plyr from 'plyr';
  11. import { ref } from 'vue';
  12. import TCPlayer from 'tcplayer.js';
  13. import 'tcplayer.js/dist/tcplayer.min.css';
  14. import styles from './index.module.less';
  15. import iconplay from '@views/attend-class/image/icon-pause.png';
  16. import iconpause from '@views/attend-class/image/icon-play.png';
  17. import iconReplay from '@views/attend-class/image/icon-replay.png';
  18. import iconPreviewDownload from '@views/attend-class/image/icon-preivew-download2.png';
  19. import iconFullscreen from '@views/attend-class/image/icon-fullscreen.png';
  20. import iconFullscreenExit from '@views/attend-class/image/icon-fullscreen-exit.png';
  21. import iconSpeed from '@views/attend-class/image/icon-speed.png';
  22. import { NSlider, useMessage } from 'naive-ui';
  23. import { saveAs } from 'file-saver';
  24. import { exitFullscreen } from '/src/utils';
  25. export default defineComponent({
  26. name: 'video-play',
  27. props: {
  28. src: {
  29. type: String,
  30. default: ''
  31. },
  32. title: {
  33. type: String,
  34. default: ''
  35. },
  36. poster: {
  37. type: String,
  38. default: ''
  39. },
  40. isEmtry: {
  41. type: Boolean,
  42. default: false
  43. },
  44. isDownload: {
  45. type: Boolean,
  46. default: false
  47. },
  48. fullscreen: {
  49. type: Boolean,
  50. default: false
  51. }
  52. },
  53. emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
  54. setup(props, { emit, expose }) {
  55. const message = useMessage();
  56. const videoId =
  57. 'vFullscreen' + Date.now() + Math.floor(Math.random() * 100);
  58. const { src, poster, isEmtry } = toRefs(props);
  59. const videoFroms = reactive({
  60. isFullScreen: false, // 是否全屏
  61. paused: true,
  62. currentTimeNum: 0,
  63. currentTime: '00:00',
  64. durationNum: 0,
  65. duration: '00:00',
  66. showBar: true,
  67. timer: null as any,
  68. speedControl: false,
  69. speedStyle: {
  70. left: '1px'
  71. },
  72. defaultSpeed: 1 // 默认速度
  73. });
  74. const videoRef = ref();
  75. const videoItem = ref();
  76. const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
  77. // 对时间进行格式化
  78. const timeFormat = (num: number) => {
  79. if (num > 0) {
  80. const m = Math.floor(num / 60);
  81. const s = num % 60;
  82. return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
  83. } else {
  84. return '00:00';
  85. }
  86. };
  87. //
  88. const toggleHideControl = (isShow = false) => {
  89. videoFroms.showBar = isShow;
  90. videoFroms.speedControl = false;
  91. };
  92. const onReplay = () => {
  93. videoFroms.speedControl = false;
  94. if (!videoItem.value) return;
  95. videoItem.value.currentTime(0);
  96. };
  97. // 切换音频播放
  98. const onToggleVideo = (e?: MouseEvent) => {
  99. videoFroms.speedControl = false;
  100. e?.stopPropagation();
  101. if (videoFroms.paused) {
  102. videoItem.value.play();
  103. videoFroms.paused = false;
  104. } else {
  105. videoItem.value.pause();
  106. videoFroms.paused = true;
  107. }
  108. emit('togglePlay', videoFroms.paused);
  109. };
  110. // 下载资源
  111. const onDownload = () => {
  112. if (!props.src) {
  113. message.error('下载失败');
  114. return;
  115. }
  116. const fileUrl = props.src;
  117. // 发起Fetch请求
  118. fetch(fileUrl)
  119. .then(response => response.blob())
  120. .then(blob => {
  121. saveAs(blob, props.title || new Date().getTime() + '');
  122. })
  123. .catch(() => {
  124. message.error('下载失败');
  125. });
  126. };
  127. /** 延迟收起模态框 */
  128. const setModelOpen = (status = true) => {
  129. clearTimeout(videoFroms.timer);
  130. toggleHideControl(status);
  131. videoFroms.timer = setTimeout(() => {
  132. toggleHideControl(false);
  133. }, 3000);
  134. };
  135. const __init = () => {
  136. if (videoItem.value) {
  137. videoItem.value.poster(poster.value); // 封面
  138. videoItem.value.src(isEmtry.value ? '' : src.value); // url 播放地址
  139. // 初步加载时
  140. videoItem.value.one('loadedmetadata', () => {
  141. console.log(' Loading metadata');
  142. // 获取时长
  143. videoFroms.duration = timeFormat(
  144. Math.round(videoItem.value.duration())
  145. );
  146. videoFroms.durationNum = videoItem.value.duration();
  147. emit('loadedmetadata', videoItem.value);
  148. });
  149. // 视频播放时加载
  150. videoItem.value.on('timeupdate', () => {
  151. videoFroms.currentTime = timeFormat(
  152. Math.round(videoItem.value?.currentTime() || 0)
  153. );
  154. videoFroms.currentTimeNum = videoItem.value.currentTime();
  155. });
  156. // 视频播放结束
  157. videoItem.value.on('ended', () => {
  158. videoFroms.paused = true;
  159. emit('ended');
  160. });
  161. videoItem.value.on('play', () => {
  162. setModelOpen();
  163. });
  164. videoItem.value.on('pause', () => {
  165. clearTimeout(videoFroms.timer);
  166. videoFroms.showBar = true;
  167. });
  168. }
  169. };
  170. /** 全屏 */
  171. const isElementFullscreen = (element: any) => {
  172. const dom: any = document;
  173. return (
  174. element ===
  175. (dom.fullscreenElement ||
  176. dom.webkitFullscreenElement ||
  177. dom.mozFullScreenElement ||
  178. dom.msFullscreenElement)
  179. );
  180. };
  181. const onFullScreen = () => {
  182. const el: any = document.querySelector('#' + videoId);
  183. // //进入全屏
  184. if (el) {
  185. if (isElementFullscreen(el)) {
  186. exitFullscreen();
  187. } else {
  188. (el.requestFullscreen && el.requestFullscreen()) ||
  189. (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
  190. (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
  191. (el.msRequestFullscreen && el.msRequestFullscreen());
  192. }
  193. // videoFroms.isFullScreen = isElementFullscreen(el);
  194. }
  195. };
  196. const onFullScreenChange = () => {
  197. if (document.fullscreenElement) {
  198. videoFroms.isFullScreen = true;
  199. } else {
  200. videoFroms.isFullScreen = false;
  201. }
  202. };
  203. onMounted(() => {
  204. videoItem.value = TCPlayer(videoID, {
  205. appID: '',
  206. controls: false
  207. }); // player-container-id 为播放器容器 ID,必须与 html 中一致
  208. __init();
  209. window.addEventListener('fullscreenchange', onFullScreenChange);
  210. });
  211. onUnmounted(() => {
  212. window.removeEventListener('fullscreenchange', onFullScreenChange);
  213. });
  214. expose({
  215. // changePlayBtn,
  216. toggleHideControl
  217. });
  218. return () => (
  219. <div
  220. class={[styles.videoWrap]}
  221. id={videoId}
  222. onClick={() => setModelOpen(!videoFroms.showBar)}>
  223. <div class={[styles.videoContent]}>
  224. <video
  225. style={{ width: '100%', height: '100%' }}
  226. src={isEmtry.value ? '' : src.value}
  227. poster={poster.value}
  228. ref={videoRef}
  229. id={videoID}
  230. preload="auto"
  231. playsinline
  232. webkit-playsinline></video>
  233. <div
  234. class={[
  235. styles.controls,
  236. videoFroms.showBar ? '' : styles.sectionAnimate
  237. ]}
  238. onClick={(e: MouseEvent) => {
  239. e.stopPropagation();
  240. emit('reset');
  241. setModelOpen();
  242. }}>
  243. <div class={styles.actions}>
  244. <div class={styles.actionWrap}>
  245. <button class={styles.actionBtn} onClick={onToggleVideo}>
  246. {videoFroms.paused ? (
  247. <img class={styles.playIcon} src={iconplay} />
  248. ) : (
  249. <img class={styles.playIcon} src={iconpause} />
  250. )}
  251. </button>
  252. <button class={styles.iconReplay} onClick={onReplay}>
  253. <img src={iconReplay} />
  254. </button>
  255. <div
  256. class={styles.actionBtnSpeed}
  257. onClick={(e: any) => {
  258. e.stopPropagation();
  259. videoFroms.speedControl = !videoFroms.speedControl;
  260. }}>
  261. <img src={iconSpeed} />
  262. <div
  263. style={{
  264. display: videoFroms.speedControl ? 'block' : 'none'
  265. }}>
  266. <div
  267. class={styles.sliderPopup}
  268. onClick={(e: Event) => {
  269. e.stopPropagation();
  270. }}>
  271. <i
  272. class={styles.iconAdd}
  273. onClick={() => {
  274. if (videoFroms.defaultSpeed >= 1.5) {
  275. return;
  276. }
  277. if (videoItem.value) {
  278. videoFroms.defaultSpeed =
  279. (videoFroms.defaultSpeed * 10 + 1) / 10;
  280. videoItem.value.playbackRate(
  281. videoFroms.defaultSpeed
  282. );
  283. }
  284. }}></i>
  285. <NSlider
  286. value={videoFroms.defaultSpeed}
  287. step={0.1}
  288. max={1.5}
  289. min={0.5}
  290. vertical
  291. tooltip={false}
  292. onUpdate:value={(val: number) => {
  293. videoFroms.defaultSpeed = val;
  294. if (videoItem.value) {
  295. videoItem.value.playbackRate(
  296. videoFroms.defaultSpeed
  297. );
  298. }
  299. }}>
  300. {{
  301. thumb: () => (
  302. <div class={styles.sliderPoint}>
  303. {videoFroms.defaultSpeed}
  304. <span>x</span>
  305. </div>
  306. )
  307. }}
  308. </NSlider>
  309. <i
  310. class={[styles.iconCut]}
  311. onClick={() => {
  312. if (videoFroms.defaultSpeed <= 0.5) {
  313. return;
  314. }
  315. if (videoItem.value) {
  316. videoFroms.defaultSpeed =
  317. (videoFroms.defaultSpeed * 10 - 1) / 10;
  318. videoItem.value.playbackRate(
  319. videoFroms.defaultSpeed
  320. );
  321. }
  322. }}></i>
  323. </div>
  324. </div>
  325. </div>
  326. </div>
  327. </div>
  328. <div class={styles.slider}>
  329. <NSlider
  330. value={videoFroms.currentTimeNum}
  331. step={0.01}
  332. max={videoFroms.durationNum}
  333. tooltip={false}
  334. onUpdate:value={(val: number) => {
  335. videoFroms.speedControl = false;
  336. videoItem.value.currentTime(val);
  337. videoFroms.currentTimeNum = val;
  338. videoFroms.currentTime = timeFormat(Math.round(val || 0));
  339. }}
  340. />
  341. </div>
  342. <div class={styles.actions}>
  343. <div class={styles.time}>
  344. <div
  345. class="plyr__time plyr__time--current"
  346. aria-label="Current time">
  347. {videoFroms.currentTime}
  348. </div>
  349. <span class={styles.line}>/</span>
  350. <div
  351. class="plyr__time plyr__time--duration"
  352. aria-label="Duration">
  353. {videoFroms.duration}
  354. </div>
  355. </div>
  356. <div class={styles.actionWrap}>
  357. {props.isDownload && (
  358. <button class={styles.iconDownload} onClick={onDownload}>
  359. <img src={iconPreviewDownload} />
  360. </button>
  361. )}
  362. {props.fullscreen && (
  363. <button class={styles.iconDownload} onClick={onFullScreen}>
  364. <img
  365. src={
  366. videoFroms.isFullScreen
  367. ? iconFullscreenExit
  368. : iconFullscreen
  369. }
  370. />
  371. </button>
  372. )}
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378. );
  379. }
  380. });