vue 移动端视频功能实现

###首先下载插件（vue2和3下载的依赖有版本区别，这里是2）
npm install vue-video-player@5.0.1 --save

下载完毕之后，在vue的maim里面引入

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)

然后就是就是我的全部代码

<template><div><video-player style="width: 90%;height: 100%;margin:0 auto;"  class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div>
</template><script>
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: [{type: "video/mp4",src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //url地址}],poster: "", //你的封面地址// width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}};}
};
</script><style scoped>
</style>

vue 移动端视频功能实现相关推荐

android ios 实时视频播放,vue 移动端视频自动播放兼容ios，安卓
安卓初始化自动播放首先创建一个jsmpeg.js文件,代码源文件放在百度网盘了,请自行下载百度网盘下载地址链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYe ...
vue 移动端搜索功能（带历史搜索记录）
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...
如何快速实现移动端短视频功能？
在"互联网+"概念被炒的如火如荼的今天,短视频以视频短.传播快.生产流程简单.制作门槛低.参与性强等特点在互联网所有的热门的焦点中脱颖而出,出现在公众的视野里.那么如何快速实现移动 ...
Vue移动端----页面旋转进入特效功能实现
[Vue移动端]页面进入特效实现–翻转白云悠悠苍狗悠悠茶水一杯温润入喉本来今日正在浏览csdn 学习学习Koa 秃然微信 " ding" 嚯?什么情况?先瞅瞅 CSS?这 ...
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
一.项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
php和asp渲染页面,Vue.js与 ASP.NET Core 服务端渲染功能
在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js 服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.A ...
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
前言最近刚好在做这方面的功能,就网上看了下,发现很多种写法,但是有些写的很乱, 我也看的很麻烦,干脆就自己写一个简单的静态版本放在这, 以后需要用到的时候可以直接拿着改改就能用. 后面我还会继续更新 ...
vue pc端实现直播功能+弹幕
vue项目中实现直播功能同时具备弹幕和聊天室功能一.vue中实现直播功能 1.首先,需要知道直播的常用协议,RTMP 和 HLS,我这边采用的直播流为HLS.下面就是对播放选取,做过 H5 播放器的 ...
vue教程入门视频,vue入门视频教程
vue是什么 ?怎么用? vue是一个视频剪辑软件.在我们制作(自行拍摄之前)可以来设置拍摄时候的色调滤镜,拍摄的时长,这些拍摄的视频,可以直接用到我们要制作的剪辑小视屏当中. 调用手机里的小视屏.可 ...

vue 移动端视频功能实现

vue 移动端视频功能实现相关推荐

最新文章

热门文章