Vue在单页面应用中实现视频标签的重复播放时，是利用了浏览器缓存的机制，当用户第一次观看视频时会将视频流动态加载到内存中，如果用户再次观看同一视频，那么浏览器会直接通过缓存来播放该视频，不需要重新请求服务器资源，因此不会消耗流量。当然，如果用户清空了浏览器缓存或者更换了设备，那么仍然需要重新加载视频文件并消耗流量。此外，Vue也可以通过将视频文件进行压缩和转码等方式，以减小视频大小，进一步降低流量消耗。
在确认src已改变后执行
this$nextTick(() => {
this$refsvideoPlayload();
});
vue使用videojs播放ktv视频显示不支持。在vue页使用videojs方法调用时候遇到问题，一直提示无法找到视频文件正确路径，无法播放。视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确播放。nextTick使用，并且确认需要拿到videojs变量之后，视频可以正确播放了。
更换成videojs插件。
一直提示无法找到视频文件正确路径，无法播放。原因在于视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确播放。
video，英语单词，主要用作名词、形容词、动词，作名词时意为视频，录像，录像机，电视。作形容词时意为视频的，录像的，电视的，作动词时意为录制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
前言
在使用vue-video-player 老是无法播放视频，出现如下错误。
最终在不懈努力下和强大的搜索引擎加持下，终于拼凑成了一个可以播放的结果,具体参照如下代码。
实践
1npm 参考地址
vue-video-player
2安装插件
npm install vue-video-player --save
3引入
import VideoPlayer from 'vue-video-player'
require('videojs/dist/video-jscss')
require('vue-video-player/src/custom-themecss')
Vueuse(VideoPlayer)
4页面中使用
最终
<template>
<div>
<!-- 页头配置 -->
<div class="page-content">
<!--在视频外面加一个容器-->
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</div>
</template>
<script>
// 1全局引用
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
require('videojs/dist/video-jscss')
require('vue-video-player/src/custom-themecss')
Vueuse(VideoPlayer)
export default {
mounted() {},
components: {},
data() {
return {
// 视频播放
playerOptions: {
playbackRates: [05, 10, 15, 20], //可选择的播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Videojs player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
今天在测试同事的微信平台的发送语音的时候，发现有时候语音能发过来，有时候就不行，经过检查，发现丢掉了检测音频时长（微信里面语言时长要限定在60S内），好吧，我补上，闲着也是闲着~
首先是读取语音的时长：
<span style="font-size:14px;"> /// <summary>
/// 获取上传音频的时间长度
/// </summary>
/// <param name="strFullUrl">The STR full URL</param>
/// <returns>SystemString</returns>
/// <remarks>Editor：v-liuhch CreateTime：2015/5/15 17:32:57</remarks>
public string GetLocalVoiceTotalTime(string strFullUrl)
{
ShellClass sh = new ShellClass();
Folder dir = shNameSpace(PathGetDirectoryName(strFullUrl));
FolderItem item = dirParseName(PathGetFileName(strFullUrl));
return dirGetDetailsOf(item, 27); // 获取歌曲时长。
}</span>
使用shellclass的时候要先引用COM组件Microsoft Shell Controls And Automation，并将Embed Interop Type 设为False。
由于上述函数只支持读取本地文件，所以，我们将得到的文件先放在临时文件夹中，判断完成之后立即删除。
<span style="font-size:14px;">/// <summary>
/// 检查上传音频文件的总时间长度是否小于60s
/// </summary>
/// <param name="file">The file</param>
/// <returns><c>true</c> if XXXX, <c>false</c> otherwise</returns>
/// <remarks>Editor：v-liuhch CreateTime：2015/5/15 17:34:51</remarks>
public bool ChkVideoTotalTime(>
以上就是关于vue视频标签重复播放时不消耗流量加载全部的内容，包括:vue视频标签重复播放时不消耗流量加载、记录vue动态切换video src 视频还是播放之前的视频，即使src已改变、vue使用video.js播放ktv视频显示不支持等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）