当前位置:   article > 正文

VUE在线播放展示MP4等视频文件_vue浏览mp4

vue浏览mp4
最近项目需要做一个能在线预览docx,pdf,md,MP4等文件,下面是浏览器在线播放视频文件,选用vue-video-player组件使用

vue预览pdf

vue预览md文件

vue预览word​​​​​​​

vue-video-player
npm install vue-video-player --save
在需要使用的页面引入(也可以在mian.js全局引入都一样)
  1. import { videoPlayer } from "vue-video-player";
  2. import "video.js/dist/video-js.css";
  3. import "vue-video-player/src/custom-theme.css";
  4. export default {
  5. components: {
  6. videoPlayer,
  7. },
  8. }
视频播放配置项

sources里面src就是视频地址

  1. playerOptions: {
  2. playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  3. autoplay: false, // 如果true,浏览器准备好时开始回放。
  4. muted: false, // 默认情况下将会消除任何音频。
  5. loop: false, // 导致视频一结束就重新开始。
  6. preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  7. language: "zh-CN",
  8. aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9""4:3"
  9. fluid: false, //true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  10. sources: [
  11. {
  12. //src: "http://192.168.1.18:8080/profile/upload/2023-12-28/00_JAVA-密码学前言_更多课程添加微信453948215_20231228113818A001.avi", // 路径
  13. src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
  14. type: "video/mp4", // 类型
  15. },
  16. ],
  17. poster: "", // 你的封面地址
  18. // width: document.documentElement.clientWidth,
  19. notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  20. controlBar: {
  21. timeDivider: true,
  22. durationDisplay: true,
  23. remainingTimeDisplay: false,
  24. fullscreenToggle: true, // 全屏按钮
  25. },
  26. },
html标签内容

标签里面有各种方法事件函数(暂停,播放,进度条,加载视频资源等等)这些方法可以更具需求进行添加使用,我列出来的比较多,很多都用不到

  1. <video-player
  2. class="video-player vjs-custom-skin"
  3. ref="videoPlayer"
  4. :playsinline="true"
  5. :options="playerOptions"
  6. @play="onPlayerPlay($event)"
  7. @pause="onPlayerPause($event)"
  8. @ended="onPlayerEnded($event)"
  9. @loadeddata="onPlayerLoadeddata($event)"
  10. @waiting="onPlayerWaiting($event)"
  11. @playing="onPlayerPlaying($event)"
  12. @timeupdate="onPlayerTimeupdate($event)"
  13. @canplay="onPlayerCanplay($event)"
  14. @canplaythrough="onPlayerCanplaythrough($event)"
  15. @ready="playerReadied"
  16. @statechanged="playerStateChanged($event)"
  17. ></video-player>
视频的事件函数

上面事件对应的方法函数有一点点我自己的需求代码(主要是视频进度回显,存储)

  1. //监听播放状态改变
  2. playerStateChanged(player) {
  3. console.log(player, "gaibian");
  4. },
  5. //监听媒体是否已到达结尾,播放完
  6. //DOM元素上的readyState更改导致播放停止。
  7. onPlayerWaiting(player) {
  8. // console.log(player);
  9. },
  10. //媒体不再被禁止播放,并且已开始播放。
  11. onPlayerPlaying(player) {
  12. // console.log(player);
  13. },
  14. //当播放器在当前播放位置下载数据时触发
  15. onPlayerLoadeddata(player) {
  16. // console.log(player);
  17. },
  18. //当前播放位置发生变化时触发。
  19. onPlayerTimeupdate(player) {
  20. // 进度条变化事件 player.cache_.currentTime当前进度条时间 单位s player.cache_.duration视频总时长
  21. this.playVideo.playTime = player.cache_.currentTime;
  22. this.playVideo.currentTime = player.cache_.duration;
  23. console.log("@@@@------------", player);
  24. },
  25. //媒体的readyState为HAVE_FUTURE_DATA或更高
  26. onPlayerCanplay(player) {
  27. // console.log('player Canplay!', player)
  28. },
  29. //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
  30. onPlayerCanplaythrough(player) {
  31. // console.log('player Canplaythrough!', player)
  32. },
  33. //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
  34. playerReadied(player) {
  35. console.log(player, "视频绑定到播放器上", player.cache_);
  36. // 我们记录的有上次视频播放时间,进行回显跳转到指定进度
  37. // this.chaptersVideo.dbCourseUser.progressTime存到是我自己代码里的进度时间
  38. if (this.chaptersVideo.dbCourseUser.progressTime) {
  39. let dbCourseUser = Number(this.chaptersVideo.dbCourseUser.progressTime); //转个数字
  40. // 下面这个方法就是跳转对应时间,参数为多少秒
  41. player.currentTime(dbCourseUser);
  42. }
  43. },
  44. onPlayerPlay(player) {
  45. console.log("onPlayerPlay!", player);
  46. },
  47. onPlayerPause(player) {
  48. console.log("onPlayerPause!", player);
  49. },
  50. onPlayerEnded(player) {
  51. console.log("player ended!", player);
  52. },

使用就是很简单把后端返回的视频url地址赋予给配置项 this.playerOptions.sources[0].src就可以播放了(浏览器不支持的视频编码格式播放不了,比如avi这些等等)

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

闽ICP备14008679号