帶你看好玩的CSS-霓虹燈按鈕

于前端開發(fā)人員來說，css是我們?cè)偈煜げ贿^的朋友的，它就相當(dāng)于是我們頁面的衣服，頁面好不好看，就看我們css運(yùn)用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學(xué)起來簡單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點(diǎn)時(shí)間就可以的，需要我們的日積月累，時(shí)刻專研。

而今天，就帶給大家一個(gè)CSS特效-霓虹燈按鈕，這也是我看到很不錯(cuò)的效果，帶來分享給大家，希望大家喜歡[送心][送心][送心]

效果如下：

最終效果

那好，廢話不多說，開始我們的CSS代碼。

準(zhǔn)備一個(gè)HTML標(biāo)簽

// 這里我們用div標(biāo)簽來模擬button按鈕，標(biāo)簽可以隨意，a、p、span等都可以
// 通常在開發(fā)中使用別的標(biāo)簽來代替button標(biāo)簽，是因?yàn)樵嫉臉?biāo)簽樣式不好看，
// 我們還得重置樣式，而其他標(biāo)簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當(dāng)然，button標(biāo)簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<div class="btn">button</div>

CSS部分的代碼

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 漸變屬性，函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始樣式為這樣：

初始樣式

然后我們給按鈕加上動(dòng)畫，代碼如下：

.btn:hover {
  	// linear: 動(dòng)畫從開始到結(jié)束具有相同的速度。
    // infinite: 無限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就變?yōu)橄旅孢@樣：

最后我們給它加上鼠標(biāo)移上去的效果，代碼如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

現(xiàn)在這樣，就是我們的最終效果了：

就此，我們的霓虹燈的按鈕效果就完成了

不足百行，我們就完成了這個(gè)效果，以下是我們的CSS的全部代碼：

文簡介

在剛接觸 p5.js 時(shí)我以為這只是一個(gè)藝術(shù)方向的 canvas 庫，沒想到它還支持視頻文件和視頻流的播放。

本文簡單講講如何使用 P5.js 播放視頻。

播放視頻文件

p5.js 除了可以使用 video 元素播放視頻外，還支持使用 image 控件播放視頻。

方式1：video元素播放視頻

基礎(chǔ)用法

p5.js 的 createVideo() 方法可以創(chuàng)建一個(gè) <video> 元素。

createVideo(src, [callback]) 可以傳入2個(gè)參數(shù)：

src: 視頻路徑（必傳）?？梢詡饕粋€(gè)字符串類型的視頻路徑；也可以傳入字符串?dāng)?shù)組類型，指定多個(gè)路徑支持不同瀏覽器。
callback: 回調(diào)函數(shù)（非必傳）。在視頻加載完成時(shí)觸發(fā)。

錄制 GIF 后比較卡，將就看著吧~

// 加載本地視頻
let playing = false // 播放狀態(tài)
let video = null // 視頻
let button = null // 按鈕

// 視頻加載完成的回調(diào)函數(shù)
function afterLoad() {
  console.log('加載完成')
}

// 加載資源的生命周期
function preload() {
  video = createVideo('assets/02.mp4', afterLoad)
}

// 初始化的生命周期
function setup() {
  noCanvas()
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

// 點(diǎn)擊按鈕的事件
function toggleVid() {
  if (playing) {
    video.pause()
    button.html('播放')
  } else {
    video.loop()
    button.html('暫停')
  }
  playing = !playing;
}

粗略講講上面這段代碼。

preload() 是 p5.js 提供的一個(gè)生命周期，我們通常會(huì)將“加載靜態(tài)資源”這個(gè)步驟放在 preload() 里執(zhí)行。在《p5.js光速入門》的圖片章節(jié)里介紹過。
setup() 是一個(gè)初始化的生命周期。
createVideo() 方法加載視頻。第二個(gè)參數(shù)傳入回調(diào)函數(shù) afterLoad，在加載完視頻資源后會(huì)執(zhí)行回調(diào)函數(shù)。
video.loop() 方法可以播放視頻。
video.pause() 方法可以暫停視頻。
noCanvas() 方法用來隱藏 <canvas> 元素，因?yàn)槲覀兪褂?createVideo() 會(huì)在頁面創(chuàng)建一個(gè) <video> 元素，所以我們就不需要 <canvas> 元素了。

播放方法

除了 video.loop() 方法，還可以使用 video.play() 播放視頻。loop 是循環(huán)播放；play 只播放一次，播完就暫停。

傳入多個(gè)視頻地址

createVideo() 方法的第一個(gè)參數(shù)除了傳入一個(gè)字符串類型的視頻地址外，還可以傳入字符串?dāng)?shù)組，作用就是兼容處理。

比如你的視頻資源只有 2.mp4，你希望可以先播放 1.mp4，沒有這個(gè)視頻再播放 2.mp4，就可以這樣寫：

createVideo(['1.mp4', '2.mp4'])

但通常我們不會(huì)這樣寫，通常我們會(huì)給同一個(gè)視頻提供不同的視頻格式，然后用這種方法傳入多個(gè)視頻地址。

因?yàn)橛行g覽器不一定支持你想播放的地址，此時(shí)就可以做個(gè)保底處理。

設(shè)置視頻窗口尺寸

使用 createVideo() 方法創(chuàng)建完視頻后，可以通過 size(width, height) 設(shè)置視頻的寬高。

let video = null

function preload() {
  video = createVideo('assets/02.mp4')
  video.size(300, 600)
}

設(shè)置音量

使用 createVideo() 創(chuàng)建的視頻控件可以使用 volume() 設(shè)置視頻的音量，該方法接受1個(gè)參數(shù)，參數(shù)值在 0~1 之間。

let video = null

function preload() {
  video = createVideo('assets/02.mp4', videoLoaded)
}

function videoLoaded() {
  video.volume(0.5) // 將視頻音量設(shè)置為50%
}

方式2：用image控件播放視頻

一開始我也沒想到 image 控件可以播放視頻，誤打誤撞試出來的。

這次我就不錄屏了，工友們自己運(yùn)行試試看吧。

let playing = false
let video = null
let button = null

function preload() {
  video = createVideo('assets/02.mp4')
}

function setup() {
  video.hide()
  createCanvas(568, 320)
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

function draw() {
  image(video, 0, 0)
}

function toggleVid() {
  if (playing) {
    video.pause();
    button.html('播放');
  } else {
    video.loop();
    button.html('暫停');
  }
  playing = !playing;
}

上面的代碼中，我在 setup() 里使用了 video.hide() 方法將 createVideo() 創(chuàng)建出來的 <video> 元素隱藏起來，因?yàn)檫@次我們需要將視頻渲染到畫布中，所以不再需要 <video> 了。

接著我們?cè)?draw() 里用 image 不斷刷新視頻，所以上面這樣寫是對(duì)的。

其他地方?jīng)]變化。

接入攝像頭

如果你的設(shè)備有攝像頭，p5.js 是支持調(diào)用攝像頭并將內(nèi)容展示在畫布上的。

let capture

function setup() {
  createCanvas(480, 360)
  capture = createCapture(VIDEO)
  capture.hide()
}

function draw() {
  image(capture, 0, 0, capture.width, capture.height)
}

通過 createCapture() 方法創(chuàng)建一個(gè)包含攝像頭的音頻/視頻源 <video> 元素，把這個(gè)元素的內(nèi)容放在 p5.js 的 image 控件里。

這個(gè)默認(rèn)是顯示的，而且它是一個(gè)獨(dú)立的元素，默認(rèn)和畫布分離。所以使用 capture.hide() 方法把 <video> 元素隱藏起來，不然頁面中會(huì)出現(xiàn)兩個(gè)視頻窗口。

其他做法和前面的【方式2】差不多，這里就不再啰嗦了。

推薦閱讀

《p5.js 光速入門》

《p5.js 使用npm安裝p5.js后如何使用？》

《p5.js 變換操作》

《p5.js 3D圖形-立方體》

《p5.js 開發(fā)點(diǎn)彩畫派的繪畫工具》

《p5.js畫布操作實(shí)戰(zhàn)：創(chuàng)建，綁定指定元素，動(dòng)態(tài)調(diào)整大小，隱藏滾動(dòng)條，刪除畫布》

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

用說明：把代碼中的視頻路徑換成與自己的相對(duì)路徑或絕對(duì)路徑，播放器的窗口大小，根據(jù)需要修改高和寬的參數(shù)。

1.avi格式

復(fù)制代碼

代碼如下:

</embed>

</object>

2.mpg格式

復(fù)制代碼

代碼如下:

</object>

3.rm格式

復(fù)制代碼

代碼如下:

4.wmv格式

復(fù)制代碼

代碼如下:

</object>

5:最簡單的播放代碼

復(fù)制代碼

代碼如下:

6:有圖像的rm格式

復(fù)制代碼

代碼如下:

</OBJECT>

7:無圖像的rm格式：(如相聲，歌曲...)

復(fù)制代碼

代碼如下:

</object>

8:最簡單的media格式的播放器

復(fù)制代碼

代碼如下:

9:有圖像的media播放器，自動(dòng)調(diào)用網(wǎng)上的插件

復(fù)制代碼

代碼如下:

10:無圖像的media播放器

復(fù)制代碼

代碼如下:

</object>

11:在線播放rm格式視頻代碼

復(fù)制代碼

代碼如下:

</object><br>

</object>

媒體播放器的外觀界面

在網(wǎng)頁中，你可以通過相關(guān)屬性來控制媒體播放器的哪些部分出現(xiàn)，哪些部分不出現(xiàn)。

媒體播放器包括如下元素：

VideoDisplayPanel：視頻顯示面板；

VideoBorder：視頻邊框；

ClosedCaptioningDisplayPanel；字幕顯示面板；

TrackBar；搜索欄；

ControlBarwithAudioandPositionControls：帶有聲音和位置控制的控制欄；

GoToBar：轉(zhuǎn)到欄；

DisplayPanel：顯示面板；

StatusBar：狀態(tài)欄；

下面的屬性用來決定顯示哪一個(gè)元素：

ShowControls屬性：是否顯示控制欄（包括播放控件及可選的聲音和位置控件）；

ShowAudioControls屬性：是否在控制欄顯示聲音控件（靜音按鈕和音量滑塊）；

ShowPositionControls屬性：是否在控制欄顯示位置控件（包括向后跳進(jìn)、快退、快進(jìn)、向前跳進(jìn)、預(yù)覽播放列表中的每個(gè)剪輯）；

ShowTracker屬性：是否顯示搜索欄；

ShowDisplay屬性：是否顯示顯示面板（用來提供節(jié)目與剪輯的信息）；

ShowCaptioning屬性：是否顯示字幕顯示面板；

ShowGotoBar屬性：是否顯示轉(zhuǎn)到欄；

ShowStatusBar屬性：是否顯示狀態(tài)欄；

播放列表

媒體播放器提供下面的方法來訪問播放列表中的剪輯：

Next方法，跳到節(jié)目（播放列表）中的下一個(gè)剪輯；

Previous方法，跳回到節(jié)目中的上一個(gè)剪輯；

媒體播放器的一個(gè)特性是能夠預(yù)覽節(jié)目中的每一個(gè)剪輯，使用如下屬性：

PreviewMode屬性，決定媒體播放器當(dāng)前是否處于預(yù)覽模式；

CanPreview屬性，決定媒體播放器能否處于預(yù)覽模式；

在windows媒體元文件中，可以為每一個(gè)剪輯指定預(yù)覽時(shí)間——PREVIEWDURATION,如果沒有指定，那么默認(rèn)的預(yù)覽時(shí)間是10秒鐘。

你也可以用Windows媒體元文件來添加watermarks與banners，元文件也支持插入廣告時(shí)的無間隙流切換。

節(jié)目信息

使用GetMediaInfoString方法可以返回相關(guān)剪輯或節(jié)目的如下信息：

文件名：Filename

標(biāo)題：Title

描述：Description

作者：Author

版權(quán)：Copyright

級(jí)別：Rating

URLs：logoicon、watermark、banner的地址

剪輯信息可以放在媒體文件中，也可以放在Windows媒體元文件中，或者兩者都放。如果在元文件中指定了剪輯信息，那么用GetMediaInfoString方法返回的就是元文件中的信息，而不會(huì)返回剪輯中包含的信息。

在元文件中，附加信息可以放置在每一個(gè)剪輯或節(jié)目的PARAM標(biāo)簽中。你可以為每個(gè)剪輯添加任意多個(gè)PARAM標(biāo)簽，用來存儲(chǔ)自定義的信息或鏈接到相關(guān)站點(diǎn)。在PARAM標(biāo)簽中的信息可以通過GetMediaParameter方法來訪問。

下面的屬性返回有關(guān)大小和時(shí)間的信息：

ImageSourceHeight、ImageSourceWidth：返回圖像窗口的顯示尺寸；

Duration屬性，返回剪輯的長度(秒)，要檢測(cè)這個(gè)屬性是否包含有效的數(shù)值，請(qǐng)檢查IsDurationValid屬性。(對(duì)于廣播的視頻，其長度是不可預(yù)知的)。

字幕

你可以用.smi文件來為你的節(jié)目添加字幕。媒體播放器支持下面的屬性來處理字幕：

SAMIFileName屬性，指定.smi文件的名字；

SAMILang屬性，指定字幕的語言(如果沒有指定則使用第一種語言)；

SAMIStyle屬性，指定字幕的文字大小和樣式；

ShowCaptioning屬性，決定是否顯示字幕顯示面板；

腳本命令

伴隨音頻、視頻流，你可以在流媒體文件中加入腳本命令。腳本命令是多媒體流中與特定時(shí)間同步的多對(duì)Unicode串。第一個(gè)串標(biāo)識(shí)待發(fā)命令的類型，第二個(gè)串指定要執(zhí)行的命令。

當(dāng)流播放到與腳本相關(guān)的時(shí)間時(shí)，控件會(huì)向網(wǎng)頁發(fā)送一個(gè)ScriptCommand事件，然后由事件處理進(jìn)程來響應(yīng)這個(gè)事件。腳本命令字符串會(huì)作為腳本命令事件的參數(shù)傳遞給事件處理器。

媒體播放器會(huì)自動(dòng)處理下面類型的內(nèi)嵌腳本命令：

1)URL型命令：當(dāng)媒體播放器控件收到一個(gè)URL型的命令時(shí)，指定的URL會(huì)被裝載到用戶的默認(rèn)瀏覽器。如果媒體播放器嵌在一個(gè)分幀的HTML文件中，URL頁可以裝載到由腳本命令指定的幀內(nèi)。如果腳本命令沒有指定一個(gè)幀，將由DefaultFrame屬性決定將URL頁裝入哪一幀。

你可以通過設(shè)置InvokeURLs屬性來決定是否自動(dòng)處理URL型的腳本命令。如果這個(gè)屬性的值為false，媒體播放器控件將忽視URL型命令。但是腳本命令事件仍會(huì)觸發(fā)，這就允許你有選擇地處理URL型命令。

URL型命令指定的是URL的相對(duì)地址?；刂肥怯葿aseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數(shù)是鏈接好的地址。

2)FILENAME型命令：當(dāng)媒體播放器控件收到一個(gè)FILENAME型的命令時(shí)，它將FileName屬性設(shè)置為腳本命令提供的文件，之后媒體播放器會(huì)打開這個(gè)文件開始播放。媒體播放器控件總是自動(dòng)處理FILENAME型命令，不象URL型命令，它們不能被禁止。

3)TEXT型命令：當(dāng)媒體播放器控件收到一個(gè)TEXT型的命令時(shí)，它會(huì)將命令的內(nèi)容顯示在控件的字幕窗口。內(nèi)容可以是純文本的，也可以是HTML。

4)EVENT型命令：當(dāng)媒體播放器控件收到一個(gè)EVENT型的命令時(shí)，它會(huì)在媒體元文件中搜索EVENT元素的NAME屬性。如果NAME屬性與腳本命令中的第二個(gè)字符串匹配，媒體播放器控件就執(zhí)行包含在EVENT元素中的條目。

5)OPENEVENT型命令：當(dāng)媒體播放器控件收到一個(gè)OPENEVENT型的命令時(shí)，它會(huì)在媒體元文件中檢查EVENT元素，并打開匹配的標(biāo)題，但不播放，直到收到來自EVENT型命令的同名真實(shí)事件。

捕捉鍵盤和鼠標(biāo)事件

EnableContextMenu與ClickToPlay屬性為用戶提供了在圖像窗口進(jìn)行操作的方法。

如果EnableContextMenu屬性為true，在圖像窗口右擊鼠標(biāo)可以打開關(guān)聯(lián)菜單，如果將ClickToPlay屬性設(shè)為true，用戶可以單擊圖像窗口進(jìn)行播放與暫停的切換。

要接收鼠標(biāo)移動(dòng)和單擊事件，請(qǐng)將SendMouseMoveEvents和SendMouseClickEvents屬性設(shè)為true。鼠標(biāo)事件有：

MouseDown，當(dāng)用戶按下鼠標(biāo)時(shí)產(chǎn)生；

MouseUp，當(dāng)用戶釋放鼠標(biāo)時(shí)產(chǎn)生；

MouseMove，當(dāng)用戶移動(dòng)鼠標(biāo)時(shí)產(chǎn)生；

Click，當(dāng)用戶在媒體播放器上單擊鼠標(biāo)按鈕時(shí)產(chǎn)生；

DbClick，當(dāng)用戶在媒體播放器上雙擊鼠標(biāo)按鈕時(shí)產(chǎn)生；

要接收鍵盤事件，請(qǐng)將SendKeyboardEvents屬性設(shè)為true。鍵盤事件有：

KeyDown，當(dāng)用戶按下一個(gè)鍵時(shí)產(chǎn)生；

KeyUp，當(dāng)用戶釋放一個(gè)鍵時(shí)產(chǎn)生；

KeyPress，當(dāng)用戶按下并釋放一個(gè)鍵時(shí)產(chǎn)生；

監(jiān)測(cè)流狀態(tài)與網(wǎng)絡(luò)鏈接

流狀態(tài)屬性包括：

PlayState：播放狀態(tài)；

OpenState：打開狀態(tài)；

Bandwidth：帶寬；

支持的事件有：

OpenStateChange：打開狀態(tài)改變(僅當(dāng)SendOpenStateChangeEvents屬性為true時(shí)觸發(fā))

PlayStateChange：播放狀態(tài)改變(僅當(dāng)SendPlayStateChangeEvents屬性為true時(shí)觸發(fā))

EndOfStream：流結(jié)束時(shí)觸發(fā)；

NewStream：打開新流時(shí)觸發(fā)；

網(wǎng)絡(luò)接收屬性包括：

ReceptionQuality：接收質(zhì)量；

ReceivedPackets：已經(jīng)收到的包；

LostPackets：丟失的包；

監(jiān)測(cè)緩沖的屬性有：

BufferingTime：緩沖時(shí)間；

BufferingCount：緩沖次數(shù)；

BufferingProgress：緩沖進(jìn)程；

Buffering：緩沖事件；

錯(cuò)誤處理

媒體播放器提供了內(nèi)建的錯(cuò)誤處理功能——在對(duì)話框或狀態(tài)欄顯示錯(cuò)誤信息。另外，你可以自己添加錯(cuò)誤處理程序。如果SendErrorEvents屬性設(shè)置為true，將不會(huì)顯示錯(cuò)誤框，而是發(fā)送錯(cuò)誤事件；如果SendErrorEvents屬性設(shè)置為false，將顯示錯(cuò)誤框，而是發(fā)送錯(cuò)誤事件。

媒體播放器支持下面的錯(cuò)誤處理事件：

Error事件，指有危險(xiǎn)性錯(cuò)誤發(fā)生；

Warning事件，指發(fā)生了非危險(xiǎn)性的錯(cuò)誤；

當(dāng)你的應(yīng)用程序接收到一個(gè)錯(cuò)誤事件，你可以檢測(cè)下面的屬性來確定具體的錯(cuò)誤信息：

HasError：檢測(cè)目前的媒體播放器是否有錯(cuò)誤；

ErrorCode：提供與該類型錯(cuò)誤相關(guān)的代碼值；

ErrorDescription：提供錯(cuò)誤的描述信息；

ErrorCorrection：指定媒體播放器對(duì)該類型的錯(cuò)誤進(jìn)行校正；

播放CD

媒體播放器將CD看作（在每個(gè)音軌的開頭具有標(biāo)記的）單一音頻流。要在網(wǎng)頁中使用CD，你需要將FileName屬性設(shè)為CDAUDI，必須帶有冒號(hào)，如下所示：

復(fù)制代碼

代碼如下:

<HTML>

<HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>

<BODY>

<OBJECTID="MediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

WIDTH="320"

HEIGHT="508"

STYLE="position:absolute;left:0px;top:70px;">

<PARAMNAME="FileName"VALUE="cdaudi">

<PARAMNAME="AutoStart"VALUE="0">

<PARAMNAME="ShowControls"VALUE="1">

<PARAMNAME="ShowStatusBar"VALUE="1">

<PARAMNAME="ShowDisplay"VALUE="1">

</OBJECT>

</BODY>

</HTML>

之后你可以用Play方法播放CD了。

你可以在windows媒體元文件中指定播放順序以及每個(gè)音軌的信息。示例如下：

<ASXVERSION="3.0">

<TITLE>CDAudiowiththeMediaPlayer</TITLE>

<AUTHOR>WindowsMediaTechnologies</AUTHOR>

<ENTRY>

<TITLE>Track1:Title1</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="1"/>

<ENDMARKERNUMBER="2"/>

</ENTRY>

<ENTRY>

<TITLE>Track2:Title2</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="2"/>

<ENDMARKERNUMBER="3"/>

</ENTRY>

<ENTRY>

<TITLE>Track3:Title3</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="3"/>

<ENDMARKERNUMBER="4"/>

</ENTRY>

<ENTRY>

<TITLE>Track4:Title4</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="4"/>

</ENTRY>

</ASX>

在線咨詢

上一篇：List集合簡單總結(jié)
下一篇：抖音里怎么通過鏈接跳轉(zhuǎn)添加微信？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

帶你看好玩的CSS-霓虹燈按鈕

準(zhǔn)備一個(gè)HTML標(biāo)簽

CSS部分的代碼

文簡介

播放視頻文件

方式1：video元素播放視頻

基礎(chǔ)用法

播放方法

傳入多個(gè)視頻地址

設(shè)置視頻窗口尺寸

設(shè)置音量

方式2：用image控件播放視頻

接入攝像頭

推薦閱讀

您的項(xiàng)目需求