使用Node.js爬取任意網頁資源並輸出高質量PDF檔案到本地
阿新 • • 發佈:2020-12-11
vue + vue-video-player新增多個視訊案例,包含更改視訊播放外掛樣式CSS
<template>
<div>
<div class="player" v-for="(item,index) in videoConfig" :key="index">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
style="object-fit:fill;margin-top: 10px"
:x5-video-player-fullscreen="true"
@pause= "onPlayerPause($event)"
@play="onPlayerPlay($event)"
@fullscreenchange="onFullscreenChange($event)"
@click="fullScreen"
:options="item"
>
</video-player>
</div>
</div>
</template>
<script>
import {videoPlayer} from 'vue-video-player'
require('vue-video-player/node_modules/video.js/dist/video-js.css')
export default {
data () {
return {
videoList: {},
videoConfig: [],
}
},
components: {
videoPlayer,
},
mounted () {
this.videoInfo()
this.getVideoList()
},
computed: {
player () {
return this.$refs.videoPlayer.player
}
},
methods: {
// 視訊介面
videoInfo () {
this.$http({
url: this.$http.adornUrl('介面地址'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
this.videoList = data.info
this.getVideoList()
})
},
getVideoList () {
for (let i in this.videoList) {
this.videoConfig.push({
// playerOptions: {
// playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
// recordTime: this.videoList[i].recordTime,
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: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
src: this.videoList[i].videoUrl
}],
// poster: 'http://vjs.zencdn.net/v/oceans.png',
poster: '',
width: document.documentElement.clientWidth,
notSupportedMessage: '此視訊暫無法播放,請稍後再試', // 允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按鈕
}
})
// }
}
}
}
}
}
</script>
<style scoped>
.video-js .vjs-big-play-button {
width: 72px;
height: 72px;
border-radius: 100%;
z-index: 100;
background-color: #ffffff;
border: solid 1px #979797;
}
.vido {
/*border: 1px solid lightgray;*/
height: 765px;
}
.player {
margin: 15px;
}
</style>
<style>
/*播放按鈕設定成寬高一致,圓形,居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
background-color: rgba(0, 0, 0, 0.45);
font-size: 2em;
border-radius: 50%;
height: 2em !important;
line-height: 2em !important;
margin-top: -1em !important;
margin-left: -1em !important;
width: 2em !important;
outline: none;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
/*control-bar佈局時flex,通過order調整剩餘時間的位置到進度條右邊*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time {
order: 3 !important;
}
/*進度條背景軌道*/
.video-js .vjs-slider {
border-radius: 1em;
}
/*進度條進度*/
.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level {
border-radius: 1em;
}
/*滑鼠進入播放器後,播放按鈕顏色會變*/
.video-js:hover .vjs-big-play-button, .vjs-custom-skin > .video-js .vjs-big-play-button:active, .vjs-custom-skin > .video-js .vjs-big-play-button:focus {
background-color: rgba(0, 0, 0, 0.4) !important;
}
/*control bar*/
.video-js .vjs-control-bar {
background-color: rgba(0, 0, 0, 0.2) !important;
}
/*點選按鈕時不顯示藍色邊框*/
.video-js .vjs-control-bar button {
outline: none;
}
</style>