|
|
@@ -10,50 +10,58 @@
|
|
|
:title="dialogTitle"
|
|
|
:visible.sync="dialogVisible"
|
|
|
width="80%">
|
|
|
- <span>{{videoUrl}}</span>
|
|
|
- <video-player class="video-player vjs-custom-skin"
|
|
|
- ref="videoPlayer"
|
|
|
- :playsinline="true"
|
|
|
- :options="playerOptions"
|
|
|
- ></video-player>
|
|
|
+ <div class="video-player-container">
|
|
|
+ <video-player
|
|
|
+ class="video-player"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="playerOptions"
|
|
|
+ style="width: 100%;"
|
|
|
+ ></video-player>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getDevVideoByAreaAndDev } from "@/api/aerial/devVideo";
|
|
|
+ import { videoPlayer } from "vue-video-player";
|
|
|
|
|
|
export default {
|
|
|
+ name: "",
|
|
|
+ components: {videoPlayer},
|
|
|
+ props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
areaName: '',
|
|
|
dialogVisible: false,
|
|
|
dialogTitle: '',
|
|
|
- videoUrl: '',
|
|
|
- // 视频播放
|
|
|
- playerOptions : {
|
|
|
- playbackRates : [ 0.5, 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 : "",
|
|
|
- src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
|
|
|
- } ],
|
|
|
- poster : "", //你的封面地址
|
|
|
- // width: document.documentElement.clientWidth,
|
|
|
- notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
- controlBar : {
|
|
|
- timeDivider : true,//当前时间和持续时间的分隔符
|
|
|
- durationDisplay : true,//显示持续时间
|
|
|
- remainingTimeDisplay : false,//是否显示剩余时间功能
|
|
|
- fullscreenToggle : true //全屏按钮
|
|
|
- }
|
|
|
- }
|
|
|
+ playerOptions: {
|
|
|
+ playbackRates: [0.5, 1.0, 1.5, 2.0],
|
|
|
+ autoplay: true,
|
|
|
+ muted: false,
|
|
|
+ loop: true,
|
|
|
+ preload: "auto",
|
|
|
+ language: "zh-CN",
|
|
|
+ aspectRatio: "16:9",
|
|
|
+ fluid: true,
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ type: "video/mp4",
|
|
|
+ // src: "http://www.html5videoplayer.net/videos/madagascar3.mp4",
|
|
|
+ src: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ poster: "", // 封面地址
|
|
|
+ width: document.documentElement.clientWidth,
|
|
|
+ notSupportedMessage: "加载中......", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
+ controlBar: {
|
|
|
+ timeDivider: true, // 当前时间和持续时间的分隔符
|
|
|
+ durationDisplay: true, // 显示持续时间
|
|
|
+ remainingTimeDisplay: true, // 是否显示剩余时间功能
|
|
|
+ fullscreenToggle: true, // 是否显示全屏按钮
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -61,16 +69,28 @@
|
|
|
},
|
|
|
methods: {
|
|
|
handleDevClick(devName) {
|
|
|
+ this.playerOptions.sources = [
|
|
|
+ {
|
|
|
+ type: "video/mp4",
|
|
|
+ src: '',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.playerOptions.notSupportedMessage = '加载中......';
|
|
|
getDevVideoByAreaAndDev({
|
|
|
"areaName": this.areaName,
|
|
|
"devName": devName,
|
|
|
}).then(response => {
|
|
|
- console.log(response.data.fileUrl)
|
|
|
- this.videoUrl = response.data.fileUrl;
|
|
|
- this.playerOptions.sources = [ {
|
|
|
- type : "",
|
|
|
- src : response.data.fileUrl
|
|
|
- } ],
|
|
|
+ if (response.data != null && response.data != "") {
|
|
|
+ this.playerOptions.sources = [
|
|
|
+ {
|
|
|
+ type: "video/mp4",
|
|
|
+ src: 'http://localhost:8090'+ response.data.fileUrl,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.playerOptions.notSupportedMessage = '视频未上传......';
|
|
|
+ }
|
|
|
+
|
|
|
this.dialogTitle = this.areaName + " - " + devName;
|
|
|
this.dialogVisible = true;
|
|
|
});
|
|
|
@@ -78,3 +98,18 @@
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /deep/.video-js .vjs-big-play-button {
|
|
|
+ width: 88px !important;
|
|
|
+ height: 88px !important;
|
|
|
+ border-radius: 50% !important;
|
|
|
+ border: 0;
|
|
|
+ line-height: 88px;
|
|
|
+ font-size: 56px;
|
|
|
+ object-fit: cover;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+</style>
|
wangggziwen