vue

2023-08-16 05:28| 来源: 网络整理| 查看: 265

vue-video-player 实现断点续播，currentTime不生效问题。 video设置currentTime不生效问题，谷歌浏览器不生效。 1. vue-video-player 如何实现播放视频

关于这部分，网上有很多细致的讲解，详情请看（或其他文章）：如何实现vue-video-player 组件播放

2.实现视频的播放后，需求是，要求实现断点播放。即开始播放时间不再是从0秒开始，而是根据我们自己设置（一般是后端传值过来的），使用场景上一次登录学习网站，看一个学习视频，看到20分钟（看完），假设总时长50分钟，那么下次我们再次登录学习网址，点击这个视频播放时，需要依旧从20分开始播放，而不是从0开始播放。这个时候就需要实现断点续播。

在此贴上我的组件的源代码：

import { videoPlayer } from "vue-video-player"; import "video.js/dist/video-js.css"; import "vue-video-player/src/custom-theme.css"; export default { name: "AnVideo", components: { videoPlayer, }, props: { //必传：url width: { //宽度 type: String, default: "400px", }, height: { //高度 type: String, default: "240px", }, url: { type: String, //必选参数，上传的地址 require, }, playbackRates: { type: Array, default: function () { return [0.7, 1.0, 1.5, 2.0]; //播放速度 }, }, autoplay: { type: Boolean, default: false, //如果true,浏览器准备好时自动播放。 }, muted: { type: Boolean, default: false, //默认情况下将会消除任何音频。 }, loop: { type: Boolean, default: false, //视频一结束就重新开始,循环播放。 }, aspectRatio: { type: String, default: "16:9", //播放器的动态大小,代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） }, poster: { type: String, default: "/课程学习.jpg", //视频封面地址，使用了本地一个图片 }, showPoster: { type: Boolean, default: false, //是否展示，视频封面地址 }, readiedTime: { type: String, default: "", //设置开始播放视频的位置,已经看完的时间 }, }, data() { return { playerOptions: {}, // 播放信息 player: null, duration: 0, // 视频总长 }; }, created() { this.initData(); }, methods: { initData() { this.playerOptions = { playbackRates: this.playbackRates, //播放速度 autoplay: this.autoplay, //如果true,浏览器准备好时开始回放。 muted: this.muted, // 默认情况下将会消除任何音频。 loop: this.loop, // 导致视频一结束就重新开始。 preload: "auto", //规定是否预加载视频，auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据，none - 当页面加载后不载入视频 language: "zh-CN", aspectRatio: this.aspectRatio, // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 poster: this.poster, //你的封面地址 width: document.documentElement.clientWidth, notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true, //全屏按钮 }, }; // 不设置封面地址 if (!this.showPoster) { this.playerOptions.poster = ""; } // 设置播放地址和视频类型 if (this.url) { let sources = []; let typeStr = this.url.split("."); let videoType = typeStr[typeStr.length - 1]; sources.push({ src: this.url, type: "video/" + videoType, // 类型 }); this.playerOptions.sources = sources; } }, // 播放回调 onPlayerPlay(player) { this.$emit("play", player); console.log("onPlayerPlay"); }, // 播放暂停回调 onPlayerPause(player) { console.log("onPlayerPause暂停", player); this.$emit("pause"); }, // 播放结束 onPlayerEnded() { console.log("onPlayerEnded 播放结束", player); this.$emit("ended"); }, //获取当前播放进度，当前播放位置发生变化时触发。 onPlayerTimeupdate(player) { console.log( "onPlayerTimeupdate播放位置发生变", player.cache_.currentTime ); // let currentTime = player.cache_.duration; //总时长 let currentTime = player.cache_.currentTime; //当前时间 this.$emit("timeupdate", currentTime); }, // 设置播放进度，实现断点续播。 playerReadied: function (player) { console.log("playerReadied", player); if (this.readiedTime) {//后端传值来的时间 // 我的项目中，后端传值为字符串格式 “00：00：00” 时：分：秒（所以我做了处理，将其转化为秒） let time = this.readiedTime.split(":"); let newTime = Number(time[0]) * 3600 + Number(time[1]) * 60 + Number(time[2]); console.log("处理后的时间", newTime); player.currentTime(newTime);// 此处，设置了开始播放时间。 } }, }, }; .an-video { /* width: 400px; */ margin-left: 2%; } .an-video >>> .video-js .vjs-big-play-button { top: 40%; left: 40%; } .an-video >>> .vjs-progress-control { // 不允许自己在界面中，通过点击，调节进度。（设置后，进度条会不可手动调节） pointer-events: none !important; } 3.出现问题：情况一：引用的本地视频，在火狐和谷歌都可以实现断点续播情况二：引用的http的地址的视频，在火狐可以生效，在谷歌无法生效。 4. 解决方案

更改设置响应头Content-Length 和 Accept-Ranges。在ie中也会有相应的问题产生，具体的可以按照下图的提示进行更改。火狐是没有问题的。在这里插入图片描述

5.注意

同样的问题并不是只有vue-video-player组件中存在，是video的原生Dom中就存在，修改方法一样。

【本文地址】

公司简介

联系我们