在工作中需要视频播放功能，因为前端用的vue全家桶，经过技术筛选之后决定用vue-video-player插件实现。

一.视频插件引入

1.在项目目录下安装插件
npm i vue-video-player -D 安装依赖
2.引入插件有两种方式
（1）在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)

（2）在用到的页面按需引入vue-video-player插件。

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

二.源码示例

下面源码是在用到vue-video-player插件时引入

1.template处源码(html区域)

注：在vue template标签下只能有一个根目录

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

2.script区源码(js区域)

将下面数据中src部分改为可以用资源即可，可以是网络资源和本地资源

 import { videoPlayer } from 'vue-video-player'import 'video.js/dist/video-js.css'export default {data () {return {playerOptions: {playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: false, //如果true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{// src: "//path/to/video.mp4", // 路径src: "", // 路径type: "video/mp4" // 类型}],// poster: "../../static/images/test.jpg", //你的封面地址// poster: "https://vdposter.bdstatic.com/b6d6bd184e72a1567e3c8ee8d1b8ffd1.jpeg?x-bce-process=image/resize,m_fill,w_320,h_180/format,f_jpg/quality,Q_100", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true //全屏按钮}}}},components: {videoPlayer}}

插件运用完成。

微信小程序视频播放插件vue-video-player使用兼容移动端相关推荐

微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序视频播放代码
微信小程序视频播放代码 1.index.wxml 2.index.wxss 3.index.js 4.小程序具体属性说明用法详见微信小程序官方文档video部分
微信小程序视频播放器
微信小程序视频播放器 1,视频播放器首页 wxml <swiper class="swiper" indicator-dots='{{swipterSet.indicator ...
wx-charts 微信小程序图表插件
阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
微信小程序OCR插件使用指南
业务场景:通过微信小程序扫描身份证获取详细内容. 概览微信小程序的插件扩展提供了ocr(光学字符识别)插件用来提供身份证,驾驶证,图片文字识别等常见的图片文本识别功能.能够满足大部分依赖图片文本识别 ...
微信小程序点播插件_5个常见的小程序插件功能，教你怎么用
微信小程序都有哪些插件可用?这些小程序插件功能,又该如何为企业赋能?下面就带大家了解一下,看完你就明白为什么现在这么多企业都喜欢用小程序来引流拉新,做品牌营销了. 1.小程序直播插件电商直播是近一年 ...
微信小程序图表插件（wx-charts）
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个. wx- ...

微信小程序视频播放插件vue-video-player使用兼容移动端

一.视频插件引入

二.源码示例

1.template处源码(html区域)

2.script区源码(js区域)

微信小程序视频播放插件vue-video-player使用兼容移动端相关推荐

最新文章

热门文章