Vue中使用vue-video-player视频播放器

第一步安装vue-video-player ：

npm install vue-video-player -S

在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 style="width: 80%;height: 100%;margin:0 auto;box-shadow:5px 5px 8px #888888"  class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player>

配置代码：

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  //全屏按钮}},

完整代码：

<template><div><video-player style="width: 80%;height: 100%;margin:0 auto;box-shadow:5px 5px 8px #888888"  class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div>
</template><script>export default {name: "demo7",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中使用vue-video-player视频播放器相关推荐

vue中安装和使用Dplayer视频播放器
1.下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2.使用 < ...
Mine Video Player – 视频播放器WordPress插件
介绍: 轻松实现视频在wp页面播放,支持剧集列表,支持多组视频来源,这款视频播放器WordPress插件支持m3u8/mp4等网页视频格式,同时支持直播源,也可将主流视频站的视频通过第三方程序来播放, ...
vue中使用腾讯云视频播放器
1.index.html <script src="//imgcache.qq.com/open/qcloud/video/vcplayer ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
【VideoJs】初识videojs video.js 视频播放器的基本使用 videojs基础用法 videojs视频播放器 vue3中使用videojs
videojs介绍免费,开源插件多可自定义 [推] 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧相比之下,我还是强烈推荐 [Xgp ...
VUE中集成H5直播点播播放器LivePlayer过程
基于VUE和webpck的前端工程这里可以参考 https://github.com/livegbs/GB28181-Server 1.安装@liveqing/liveplayer npm -i @ ...
实现HTML5的video标签视频播放器
HTML5的video标签 video标签提供了直接在网页上播放视频的方式,摆脱了flash插件.让实现变得更简单,只是video标签兼容性还有些问题:不兼容ie8及以下版本的浏览器. video ...
c++ vs2015 播放音乐_Linux 中的十大开源视频播放器
(给Linux爱好者加星标,提升Linux技能) 编译:linux中国-lujun9972,作者:Stella Aldridge https://linux.cn/article-11481-1.ht ...

Vue中使用vue-video-player视频播放器

Vue中使用vue-video-player视频播放器相关推荐

最新文章

热门文章