當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 背景图自适应_Vue的自适应视频背景播放器

發(fā)布時(shí)間：2023/12/14 vue 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 背景图自适应_Vue的自适应视频背景播放器小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vue 背景圖自適應(yīng)

Vue響應(yīng)視頻背景播放器 (vue-responsive-video-background-player)

Play your own videos in background responsively in different resolutions.

以不同的分辨率在后臺(tái)播放自己的視頻。

View Demo 查看演示 Download Source下載源

分兩步安裝 (Installation in 2 Steps)

1：添加npm💻 (1: Add with npm 💻)

npm install vue-responsive-video-background-player

2a：作為組件安裝 (2a: Install as a component)

import VideoBackground from 'vue-responsive-video-background-player'Vue.component('video-background', VideoBackground);

2b：安裝為插件 (2b: Install as a plugin)

import { Plugin?} from 'vue-responsive-video-background-player'Vue.use(Plugin);

用法-(或使其可運(yùn)行🏃?♂?) (Usage - (or to make it runnable 🏃?♂?))

最簡單的版本🔍 (Easiest version 🔍)

<video-background src="<your-video-path>.mp4"style="max-height: 400px; height: 100vh;"><h1 style="color: white;">Hello welcome!</h1></video-background>

高級(jí)版🌐 (Advanced version 🌐)

<video-background src="<your-default-video-path>.mp4"poster="/images/mainfoto.jpg":sources="[{src: '<your-tablet-video-path>.mp4', res: 900, autoplay: true}, {src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}]"style="max-height: 400px; height: 100vh;"overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)" ><h1 style="color: white;">Hallo welcome!</h1> </video-background>

道具 (Props)

This package is for responsive videos depicting different video resolution. Have you ever visited my favorite car company Tesla? Have a look, they use a lot of video background videos and are using different resolutions for each device.

該軟件包用于描述不同視頻分辨率的響應(yīng)視頻。您曾經(jīng)去過我最喜歡的汽車公司Tesla嗎？看看，他們使用大量視頻背景視頻，并且每種設(shè)備使用的分辨率都不同。

道具價(jià)值 (Props values)

src (required: true)
src (必需： true )

This is your path to your video. You can just use this value for showing your video in every resolution.

這是您觀看視頻的路徑。您可以使用此值以各種分辨率顯示視頻。

poster (default: '')
poster (默認(rèn)： '' )

This is your first background image that is shown before the video is loaded.

這是視頻加載前顯示的第一張背景圖片。

sources (default: [])
sources (默認(rèn)值： [] )

This is the main reason for this package. I wanted to have the possibility to change the resolution of the video when the resize event is fired.

這是此軟件包的主要原因。我希望能夠在觸發(fā)調(diào)整大小事件時(shí)更改視頻的分辨率。

To make it work, sources is an array that contains objects. For example:

為了使其正常工作，sources是一個(gè)包含對(duì)象的數(shù)組。例如：

[{src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}]

To make it work you need at least src, res, autoplay.

要使其正常工作，您至少需要src, res, autoplay 。

poster is optional.

poster是可選的。

res stand for resolution. This example means that between 0px and 638px of the window's width only the mobile video will be shown. After that your default src.

res代表分辨率。此示例表示在窗口寬度的0px至638px之間，只會(huì)顯示移動(dòng)視頻。之后，您的默認(rèn)src 。

autoplay (default: true)
autoplay (默認(rèn)： true )

The video is going to be played immediately when the video is ready. If you are setting it to false, you can start the video just by this.$refs.videobackground.player.play(). But remember to set ref=videobackground to the HTML tag <video-background>, so that it can work.

視頻準(zhǔn)備就緒后，將立即播放該視頻。如果將其設(shè)置為false，則可以僅通過this.$refs.videobackground.player.play()啟動(dòng)視頻。但是請(qǐng)記住將ref=videobackground設(shè)置為HTML標(biāo)簽<video-background> ，以便它可以正常工作。

overlay (default: '') If you love overlays, then copy the overlay from the advanced example.

overlay (默認(rèn)值： '' )如果您喜歡疊加，請(qǐng)復(fù)制高級(jí)示例中的疊加。
muted (default: true)

muted (默認(rèn)值： true )

Warning. Videos are perhaps not played when unmuted.

警告。取消靜音后，可能無法播放視頻。

loop (default: true)
loop (默認(rèn)值： true )

Loops through the video. You can catch the event ended to show only the poster.

循環(huán)播放視頻。您可以捕捉到活動(dòng)ended ，僅顯示海報(bào)。

preload (default: auto)
preload (默認(rèn)： auto )

https://www.w3schools.com/tags/att_video_preload.asp

objectFit (default: cover)
objectFit (默認(rèn)值： cover )

So the video fits perfectly in the container

因此視頻完全適合容器中

playsWhen (default: canplay)
playsWhen (默認(rèn)值： canplay )

This is important, if you know that you might have users with bad internet speed, you should definetly use canplaythrough. Learn more in video events.

這很重要，如果您知道您的用戶的互聯(lián)網(wǎng)速度可能較差，則應(yīng)canplaythrough使用canplaythrough 。了解更多視頻活動(dòng) 。

playbackRate (default: 1.0)
playbackRate (默認(rèn)值： 1.0 )

The playbackRate property sets the current playback speed of the video. Example but negative values didn't work for me?

playbackRate屬性設(shè)置視頻的當(dāng)前播放速度。示例，但是負(fù)值對(duì)我不起作用？

大事記 (Events)

ready: Video is loaded
ready ：視頻已加載
playing: Video is playing
playing ：正在播放視頻
error: Video error
error ：視頻錯(cuò)誤
loading: Video is loading
loading ：視頻正在加載
ended: Video finished, only when loop is set to false
ended ：僅當(dāng)loop設(shè)置為false時(shí)，視頻結(jié)束

方法 (Methods)

If you happen to need more control over the player, you can use the internal methods. For that, you need to set ref=videobackground to the HTML tag <video-background>. After that you can call all methods like this this.$refs.videobackground.player.play().

如果碰巧需要對(duì)播放器進(jìn)行更多控制，則可以使用內(nèi)部方法。為此，您需要將ref=videobackground設(shè)置為HTML標(biāo)簽<video-background> 。之后，您可以調(diào)用所有類似this.$refs.videobackground.player.play() 。

play(): Video is playing
play() ：正在播放視頻
pause(): Video is paused
pause() ：視頻已暫停
show(): Video is shown
show() ： show()視頻
hide(): Video is hidden, the poster is shown
hide() ：隱藏視頻，顯示海報(bào)
load(): Video is loaded
load() ：視頻已加載

安全 (Security)

If you discover any security related issues, please don't email me. I'm afraid 😱. [email?protected]

如果您發(fā)現(xiàn)任何與安全相關(guān)的問題，請(qǐng)不要給我發(fā)送電子郵件。恐怕😱。 [電子郵件保護(hù)]

翻譯自: https://vuejsexamples.com/responive-video-background-player-for-vue/