VUE使用video-player在线播放视频

1.安装

npm install vue-video-player --save

2.全局引用，在main.js里面导入并引用

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

3.vue中使用

<template><div class="video-warpper"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":options="playerOptions":playsinline="true"@timeupdate="onPlayerTimeupdate($event)"@ready="playerReadied"@pause="onPlayerPause($event)"></video-player></div>
</template>
<script>
export default {name: "player",data() {return {playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: false, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。// techOrder: ["html5"],// html5: { hls: { withCredentials: false } },preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "", // 类型src: "" //require("@/assets/video/huamlan.mp4"), // url地址}],poster: "", // 封面地址notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: true, // 是否显示剩余时间功能currentTimeDisplay: false, // 当前时间volumeControl: false, // 声音控制键playToggle: false, // 暂停和播放键progressControl: true, // 进度条fullscreenToggle: true // 是否显示全屏按钮}}, };},computed: { },mounted() { },destroyed() {},methods: { onPlayerPlay(player) {// console.log('player play!', player)},onPlayerPause(player) {console.log("player pause currentTime!", player.cache_.currentTime);let that = this;that.currentTime = player.cache_.currentTime;},onPlayerEnded(player) {// console.log('player ended!', player)},onPlayerLoadeddata(player) {// console.log('player Loadeddata!', player)},onPlayerWaiting(player) {// console.log('player Waiting!', player)},onPlayerPlaying(player) {// console.log('player Playing!', player)},/* 获取视频播放进度 */onPlayerTimeupdate(player) { },/* 设置视频开始的进度 */playerReadied(player) { },onPlayerCanplaythrough(player) {// console.log('player Canplaythrough!', player)},// or listen state eventplayerStateChanged(playerCurrentState) {// console.log('player current update state', playerCurrentState)}}
};
</script>
<style lang="scss">
.video-warpper {width: 100%;height: 100%; .Videoindex {display: block;height: 350px;max-height: 350px;margin: 10px auto;.video-js .vjs-tech {width: 100%;height: 350px;max-height: 350px;}}.video-js .vjs-big-play-button {position: absolute;display: block;top: 50%;left: 50%;background: rgba(0, 0, 0, 0.7);border: none;}.video-js .vjs-big-play-button .vjs-icon-placeholder:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.vjs-controls-disabled .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button,.vjs-error .vjs-big-play-button {display: none;}.vjs-paused .vjs-big-play-button {display: block;}
}
</style>

4.## 使用Nginx配置视频快进/快退

add_header Accept-Ranges bytes;

VUE使用video-player在线播放视频相关推荐

上传视频文件到又拍云，jsp内嵌window media player在线播放
上传视频文件到又拍云,jsp内嵌window media player在线播放完成上述功能的后台路径 filePath.jsp(ajax)->UpYunController.java--> ...
vue引入video视频播放器（视频调用代码范例）
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
Exoplayer在线播放视频
谷歌的一个在线播放视频的框架,使用起来非常简单 1.官方地址:https://github.com/google/ExoPlayer 有兴趣的,可以去官方地址,看一下框架的源码,本例子只是介绍简单使用 ...
SSM上传，下载，在线播放视频
SSM上传,下载,在线播放视频前言基于ckplayer插件的视频在线播放,首先需要下载ckplayer插件.引入你的javaweb项目. 核心代码上传的Jsp代码 <form method ...
Http Live Streaming 实现iphone在线播放视频[转]
http://hi.baidu.com/lphack/item/83865611c5f82c8988a956df 本人新手,难免会出错,请各位指点! 最近要做一个项目,是通过iphone来播放工厂摄像 ...
C#(Winform)程序无法使用Windows Media Player 组件播放视频文件
如果你的C#(Winform)程序无法使用Windows Media Player 组件播放视频文件(一旦点击播放立马程序闪退,但可以播放音频文件),请按照下面图例设置) 1.桌面右击鼠标找到独立显 ...
龙芯版UOS 自带浏览器无法使用flash在线播放视频
龙芯版UOS 自带浏览器无法使用flash在线播放视频 1.案例无法播放视频龙芯CPU使用MIPS指令集,用互联网的最新flash(一般情况下,是X86指令集flash),点击下载安装最新flas ...
在线视频播放网站服务器配置,在线播放视频网站应该如何选择服务器
原标题:在线播放视频网站应该如何选择服务器我们都知道视频类应用对服务器的要求是非常高的,特别是在线播放的视频类网站.要满足大量用户同时在线观看视频,并且做到随意拖动进度条都能流畅播放,对服务器的配置 ...
realplayer java,不同浏览器调用realplayer插件在线播放视频的有关问题，请大神们进来看看...
不同浏览器调用realplayer插件在线播放视频的问题,请大神们进来看看上面代码是调用realplayer实现在线播放的,在安装realplayer后IE.火狐.chrome都是可以播放的,但是在 ...
uniapp使用video标签无法播放视频出现黑屏问题处理
uniapp使用video标签无法播放视频出现黑屏问题处理问题出现情况并且点击播放后出现报错解决办法问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使 ...

VUE使用video-player在线播放视频

1.安装

2.全局引用，在main.js里面导入并引用

3.vue中使用

4.## 使用Nginx配置视频快进/快退

VUE使用video-player在线播放视频相关推荐

最新文章

热门文章

VUE使用video-player在线播放视频

1.安装

2.全局引用， 在main.js里面导入并引用

3.vue中使用

4.## 使用Nginx配置视频快进/快退

VUE使用video-player在线播放视频相关推荐

最新文章

热门文章

2.全局引用，在main.js里面导入并引用