vue使用vue-video-player无法播放本地视频的问题及解决

目录
  • 使用vue-video-player无法播放本地视频
    • 方法
  • 使用vue-video-player播放视频及遇到的问题
    • 安装
    • 引入

使用vue-video-player无法播放本地视频

方法

因为引入的是本地资源，要把资源写在“require”方法里

  sources: [
          {
            //类型
            type: 'video/mp4', 
            src:
              // 'https://vdept.bdstatic.com/456b54495743493962554345724c6657/75666c454a4d3637/6bcdb2c5d34e42a7e415eb94fd256c0776f262dd6b4a0ae236ec49141d30aee0d7d2168a1c3578a306b0aa646ced25250a8b77a59e758bf998ca67e20a951294.mp4?auth_key=1588762628-0-0-f0a1425379b81c7627fd77316fe1af10'
              require('../../assets/video/xing.mp4')
          },
             ]

使用vue-video-player播放视频及遇到的问题

写评论功能的时候需要把用户评论时上传的视频播放出来，我选择了vue-video-player组件；

npm链接：https://www.npmjs.com/package/vue-video-player

安装

npm install vue-video-player --save

引入

安装后在需要用的页面引入组件，当然也可以全局引入，全局引入的方法请参考npm;

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'

html 部分

<video-player
  class="video-player vjs-custom-skin"
  ref="videoPlayer"
  :playsinline="true"
  :options="playerOptions"
></video-player>

js部分

const w = window as any
const screenWidth: number = w.document.documentElement.clientWidth
const screenHeight: number = w.document.documentElement.clientHeight
this.playerOptions = {
 playsinline: true,
 autoplay: false, // 如果true,浏览器准备好时开始回放。
 muted: true, // 默认情况下将会消除任何音频。
 loop: false, // 导致视频一结束就重新开始。
 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
 language: 'zh-CN',
 aspectRatio: screenWidth + ':' + screenHeight, // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3")
 fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
 sources: [{
   type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
   src: this.fileUrl, // url地址
 }],
 poster: this.fileUrl + '?vframe/jpg/offset/1', // 你的封面地址。?vframe/jpg/offset/1添加的七牛参数，截取视频首屏作为封面；
 controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: false, // 全屏按钮
 },
}

主要想说的是aspectRatio，我用的是屏幕的宽高比，这样就算播放视频的时候不会溢出页面，播放器下面的进度条就不会被遮挡；

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用video标签实现视频播放

    本文项目为大家分享了Vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下 项目需求:动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue-video-player 组件,其原因为 封装功能齐全.播放源兼容性好等. 通过这次项目需求,也深入的学习了 video 标签的属性及方法.具体在这里跟大家分享一下. 具体使用方法如下 <template> <!-- Video组件 --> <di

  • 详解vue-video-player使用心得（兼容m3u8）

    下载vue-video-player npm install vue-video-player --save 在main.js文件引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 在页面中引入 <video-player ref="vi

  • vue-video-player视频播放器使用配置详解

    本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频播放器 import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) 3.新建一个vueVideoPlayer.vue组件供调用 <

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • vue视频播放插件vue-video-player的具体使用方法

    vue视频播放插件vue-video-player的具体使用方法

    安装 npm install vue-video-player --save 引入 可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2

  • vue使用vue-video-player无法播放本地视频的问题及解决

    目录 使用vue-video-player无法播放本地视频 方法 使用vue-video-player播放视频及遇到的问题 安装 引入 使用vue-video-player无法播放本地视频 方法 因为引入的是本地资源,要把资源写在“require”方法里   sources: [           {             //类型             type: 'video/mp4',              src:               // 'https://vdept

  • vue中使用h5 video标签实现弹窗播放本地视频的方法

    目录 1.弹窗的打开关闭 2. 本地视频资源路径的引入 3. 视频播放完毕自动关闭弹窗 4. 视频在弹窗中自适应大小 参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入的visible值: // 父组件中引用子组件 <video-modal :visible.sync="showVideoModal"> // 子组件中 <

  • 详解iOS应用中播放本地视频以及选取本地音频的组件用法

    MPMoviePlayerControlle播放本地视频 MPMoviePlayerControlle与AVAudioPlayer有点类似,前者播放视频,后者播放音频,不过也有很大不同,MPMoviePlayerController 可以直接通过远程URL初始化,而AVAudioPlayer则不可以.不过大体上用起来感觉差不多.废话少说进入体验. 格式支持:MOV.MP4.M4V.与3GP等格式,还支持多种音频格式. 首先你得引入 MediaPlayer.framework.然后在使用到MPMo

  • Android使用VideoView播放本地视频和网络视频的方法

    Android使用VideoView播放本地视频和网络视频的方法

    1.效果展示 2.布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="matc

  • iOS 本地视频和网络视频流播放实例代码

    iOS 本地视频和网络视频流播放实例代码

    需求:最近公司需要做一个楼宇对讲的功能:门口机(连接WIFI)拨号对室内机(对应的WIFI)的设备进行呼叫,室内机收到呼叫之后将对收到的数据进行UDP广播的转发,手机(连接对应的WIFI)收到视频流之后,实时的展示视频数据(手机可以接听,挂断,手机接听之后,室内机不展示视频,只是进行转发.) 简单点说就是手机客户端需要做一个类似于直播平台的软件,可以实时的展示视频,实时的播放接收到的声音数据,并且实时将手机麦克风收到的声音回传给室内机,室内机负责转发给门口机. 之前从来做过视频播放都是本地文件的

  • C# 使用SDL2实现Mp4文件播放音视频操作

    C# 使用SDL2实现Mp4文件播放音视频操作

    播放音视频的关键:视频的格式是H264,音频的格式是AAC.使用ffmpeg探测流的方式来实现音视频流的解码播放. 数据处理逻辑:H264->YUV AAC->PCM. SDL2工具类 using SDL2; using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threadi

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • vue项目中播放rtmp视频文件流的方法

    想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash.最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把n

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

随机推荐