整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          p5.js 視頻播放指南

          p5.js 視頻播放指南

          文簡(jiǎn)介

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

          本文簡(jiǎn)單講講如何使用 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ì)了

          、HTML代碼如下:

          <div id="player"></div>
          

          二、JavaScript代碼如下:

          <script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
          <script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
          <script type="text/javascript">
           new window.FlvJsPlayer({
           id: 'player',
           isLive: false,
           playsinline: true,
           url: '/test/test.flv',
           autoplay: true,
           height: window.innerHeight,
           width: window.innerWidth
           });
          </script>
          
          

          emo:

          ```html

          <!DOCTYPE html>
          <html>
          <head>
          <title>HTML5 Video(視頻):在網(wǎng)頁中播放視頻的簡(jiǎn)單方法</title>
          </head>
          <body>
          <h1>HTML5 Video(視頻):在網(wǎng)頁中播放視頻的簡(jiǎn)單方法</h1>
          <p>下面是一個(gè)使用HTML5 Video標(biāo)簽在網(wǎng)頁中播放視頻的示例:</p>
          <video width="400" controls>
          <source src="video.mp4" type="video/mp4">
          <source src="video.webm" type="video/webm">
          Your browser does not support the video tag.
          </video>
          <p>上述代碼將呈現(xiàn)出一個(gè)帶有控制條的視頻播放器,并在其中播放指定的視頻文件。視頻文件可以是MP4格式(<code>.mp4</code>)或WebM格式(<code>.webm</code>)。</p>
          <p>在上述代碼中,我們使用了HTML5的Video標(biāo)簽來嵌入視頻。通過設(shè)置<code>width</code>屬性,我們可以指定視頻播放器的寬度。通過設(shè)置<code>controls</code>屬性,我們可以啟用控制條,讓用戶可以控制視頻的播放和暫停。</p>
          <p>在<code>video</code>標(biāo)簽內(nèi)部,我們使用了<code>source</code>標(biāo)簽來指定視頻文件的URL和類型。在示例中,我們提供了兩個(gè)不同格式的視頻文件,以便在不同瀏覽器中兼容播放。</p>
          <p>如果用戶的瀏覽器不支持HTML5 Video標(biāo)簽或指定的視頻文件格式,則會(huì)顯示<code>Your browser does not support the video tag.</code>的提示信息。</p>
          <p>通過使用HTML5 Video功能,我們可以在網(wǎng)頁中方便地播放視頻,為用戶提供更加豐富和多樣化的內(nèi)容。視頻可以應(yīng)用于各種場(chǎng)景,如教育、娛樂、廣告等。</p>
          </body>
          </html>

          ```

          以上是一篇使用HTML5 Video標(biāo)簽在網(wǎng)頁中播放視頻的文章,其中包含了示例代碼和一些相關(guān)說明。通過使用HTML5的Video標(biāo)簽,我們可以在網(wǎng)頁中方便地嵌入和播放視頻。在示例中,我們使用了兩種不同格式的視頻文件,以便在不同瀏覽器中兼容播放。通過設(shè)置Video標(biāo)簽的屬性,如寬度和控制條,我們可以定制視頻播放器的外觀和功能。通過使用HTML5 Video功能,我們可以為用戶提供更加豐富和多樣化的內(nèi)容,如教育、娛樂、廣告等。請(qǐng)注意,在使用視頻功能時(shí),需要確保視頻文件的合法性和版權(quán)問題。

          我是永不低頭的熊,喜歡美食、健身,當(dāng)然也喜歡寫代碼,每天不定時(shí)更新各類編程相關(guān)的文章,希望你在碼農(nóng)這條路上不再孤單!


          主站蜘蛛池模板: 亚洲国产精品自在线一区二区| 久久国产免费一区二区三区 | 无码一区二区三区在线观看| 精品一区二区视频在线观看| 波多野结衣高清一区二区三区 | 在线精品一区二区三区| 一区二区在线免费视频| 欧美日本精品一区二区三区 | 国产在线一区二区三区av| 精品一区二区三区东京热| 日韩精品成人一区二区三区| 乱人伦一区二区三区| 波霸影院一区二区| 国产产一区二区三区久久毛片国语| 亚洲一区二区三区高清不卡 | 免费人妻精品一区二区三区| 国产精品成人一区二区三区| 老熟妇高潮一区二区三区| 无码av人妻一区二区三区四区 | 中文字幕一区二区三区精华液| 国产精品日韩一区二区三区| 国产人妖在线观看一区二区| 国产成人精品一区二三区| 国产精品538一区二区在线| 免费看无码自慰一区二区| 国产乱码精品一区二区三区麻豆 | 国产一区二区四区在线观看| 精品一区二区ww| 国产一区二区三区福利| 在线视频一区二区日韩国产| 国产在线精品一区在线观看| 香蕉久久AⅤ一区二区三区 | 日本一区二区在线播放| 亚洲一区二区三区免费在线观看 | 成人精品视频一区二区| 精品国产一区二区三区免费看| 国产精品一区二区香蕉| 日本一区二区三区不卡视频中文字幕 | 国产精品亚洲专区一区| 一区精品麻豆入口| 国产精品日本一区二区不卡视频|