vue 背景圖 自適應

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

Play your own videos in background responsively in different resolutions.

以不同的分辨率在后臺播放自己的視頻。

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);

用法-(或使其可運行🏃?♂?) (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>

高級版🌐 (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.

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

道具價值 (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 (默認： '' )

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

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

• sources (default: [])

  sources (默認值： [] )

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.

這是此軟件包的主要原因。 我希望能夠在觸發調整大小事件時更改視頻的分辨率。

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

為了使其正常工作，sources是一個包含對象的數組。 例如：

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

[{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之間，只會顯示移動視頻。 之后，您的默認src 。

• autoplay (default: true)

  autoplay (默認： 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.

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

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

  overlay (默認值： '' )如果您喜歡疊加，請復制高級示例中的疊加。

• muted (default: true)

  muted (默認值： true )

Warning. Videos are perhaps not played when unmuted.

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

• loop (default: true)

  loop (默認值： true )

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

循環播放視頻。 您可以捕捉到活動ended ，僅顯示海報。

• preload (default: auto)

  preload (默認： auto )

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

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

• objectFit (default: cover)

  objectFit (默認值： cover )

So the video fits perfectly in the container

因此視頻完全適合容器中

• playsWhen (default: canplay)

  playsWhen (默認值： 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.

這很重要，如果您知道您的用戶的互聯網速度可能較差，則應canplaythrough使用canplaythrough 。 了解更多視頻活動 。

• playbackRate (default: 1.0)

  playbackRate (默認值： 1.0 )

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

playbackRate屬性設置視頻的當前播放速度。 示例，但是負值對我不起作用？

大事記 (Events)

• ready: Video is loaded

  ready ：視頻已加載

• playing: Video is playing

  playing ：正在播放視頻

• error: Video error

  error ：視頻錯誤

• loading: Video is loading

  loading ：視頻正在加載

• ended: Video finished, only when loop is set to false

  ended ：僅當loop設置為false時，視頻結束

方法 (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().

如果碰巧需要對播放器進行更多控制，則可以使用內部方法。 為此，您需要將ref=videobackground設置為HTML標簽<video-background> 。 之后，您可以調用所有類似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() ：隱藏視頻，顯示海報

• load(): Video is loaded

  load() ：視頻已加載

安全 (Security)

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

如果您發現任何與安全相關的問題，請不要給我發送電子郵件。 恐怕😱。 [電子郵件保護]

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

vue 背景圖 自適應

總結

以上是生活随笔為你收集整理的vue 背景图 自适应_Vue的自适应视频背景播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。