比心app源码，vue 视频播放

比心app源码，vue 视频播放实现的相关代码
安装

npm i vue-video-player -S

引入

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

使用

<template><div class="container"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div>
</template><script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {name: 'index',components: { videoPlayer },data() {return {playerOptions: {playbackRates: [0.7, 1.0, 1.25, 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时, player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: 'video/mp4', // 类型src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', //url地址},],poster: '', // 封面地址notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: false, // 是否显示剩余时间功能fullscreenToggle: true, // 全屏按钮},},}},methods: {},
}
</script>

以上就是比心app源码，vue 视频播放实现的相关代码，更多内容欢迎关注之后的文章

比心app源码，vue 视频播放相关推荐

比心app源码，获取系统时间
比心app源码,获取系统时间实现的相关代码 #include <sys/time.h> int gettimeofday(struct timeval *tv, struct timezo ...
比心app源码，携带对象参数跳转页面
比心app源码,携带对象参数跳转页面实现的相关代码 1.携带对象 json转字符串后进行编码<span slot="action" slot-scope="reco ...
比心app源码，html 获取时间
比心app源码,html 获取时间相关的代码 <script type="text/javascript">var a = new Date();//时间戳var t ...
比心app源码，设置透明背景
比心app源码,设置透明背景相关的代码 <style name="dialog" parent="android:Widget.ProgressBar.Small& ...
比心app源码，Java 单例模式
比心app源码,Java 单例模式实现的相关代码概述:单例模式是指在内存中永远只有一个类的实例. 有利于节约内存和保证共享计算的结果正确,方便管理. 单例模式的形式饿汉式单例:在获取单例对象之前对 ...
Vue全家桶仿网易优选商城APP源码
介绍: Vue全家桶仿优选商城APP源码,只写了前端,用到的技术栈是Vue全家桶.mintUI.axios,没有实现后端接口,全部是抓包至商城App接口. 实现了挺多的功能的,比如首页.商品列表.商品 ...
基于苹果CMS系统的双端视频播放APP源码+视频教程
是一款基于苹果CMS系统的移动端在线视频播放软件, 支持mp4.flv.m3u8.rmvb.mkv等主流视频格式的播放,现有安卓+ios版本. 基于苹果CMS系统的双端视频播放APP源码+视频教程.z ...
最新仿网易优选APP商城源码+Vue开发全家桶
正文: 最新仿网易优选APP商城源码+Vue开发全家桶,源码采用Vue全家桶+mintUI+axios技术栈开发,只写了前端,后端采用网易商场抓包接口,也可以二次修改成自己的接口. 安装方法: 1.将 ...
【IOS】高仿暴风视频播放器app源码
高仿暴风视频播放器app源码这是一款仿照暴风影音做的demo,因为项目需要,所以顺便把他完善一点,功能有侧滑,滚动导航栏,tableView ,collectionView的高度定制,希望能帮助到有 ...

比心app源码，vue 视频播放

比心app源码，vue 视频播放相关推荐

最新文章

热门文章