vue-video-player视频播放插件

安装依赖 npm install vue-video-player -S
引入配置

这里我都是放在main.js中引入的

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

html部分：

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

JavaScript部分：

<script>export default {name: "Video",data() {return {playerOptions: {playbackRates: [1.0, 2.0, 3.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",type: "video/ogg",src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //url地址}],poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg", //你的封面地址width: document.documentElement.clientWidth,notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}}}}}
</script>

这里我记录一下，视频地址和封面地址均引用的是服务器端得，本地的视频和图片是加载不出来的

vue-video-player视频播放插件相关推荐

linux 视频插件,avpro video 插件-Avpro Video(Unity视频播放插件)下载 v1.039官方免费版--pc6下载站...
AvproVideo是一款由强大团队出品的可以在Unity上安装使用的万能多平台视频播放插件AvproVideo支持WindowslinuxiosmacAndroid等多平台万能播放.. 相关软件软件 ...
vue项目里面使用video.js视频播放插件
项目里面需要实现一个视频播放列表如上图所示的列表~~~过程如下: 引入video.js文件 npm install -S video.js 在main.js里面引入相关文件,并挂载在window对象 ...
Mine Video Player – 视频播放器WordPress插件
介绍: 轻松实现视频在wp页面播放,支持剧集列表,支持多组视频来源,这款视频播放器WordPress插件支持m3u8/mp4等网页视频格式,同时支持直播源,也可将主流视频站的视频通过第三方程序来播放, ...
vue中使用视频播放插件vue-video-player
前言在使用vue-video-player 老是无法播放视频,出现如下错误. 最终在不懈努力下和强大的搜索引擎加持下,终于拼凑成了一个可以播放的结果,具体参照如下代码. 实践 1.npm 参考地址 ...
Vue中的视频播放插件( vue-video-player )
前言在最近的项目中有一个网络视频的功能,在之前的项目中没有接触过类似的功能,第一次接触,把具体操作步骤,遇到的一些问题记录如下:(首先个人认为vue-video-player是很好用的) 第一步:我 ...
video.js 视频播放插件使用
video.js 实现视频播放,多种语言字幕点击切换 1.参考链接video.js官网 https://videojs.com/ 2.html代码视频资源标签source track 字幕资源标签,在 ...
Html5 jquery视频播放插件Video.js
<!doctype html> <html> <head><meta charset="utf-8"><title>Vi ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...

vue-video-player视频播放插件

vue-video-player视频播放插件相关推荐

最新文章

热门文章