HTML5的多個video標籤：擷取視訊源的封面圖poster，監聽視訊播放狀態的功能；

阿新 • • 發佈：2019-02-19

// 視訊------視訊截圖 ~~ 視訊播放狀態 ~~ const setMedia = function(video, scale = 0.8) { // 設定poster屬性：（非本地視訊資源會有跨域截圖問題） video.addEventListener('loadeddata', function(e) { // 拿到圖片 let canvas = document.createElement('canvas'); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; canvas.getContext('2d'

).drawImage(video, 0, 0, canvas.width, canvas.height); let src = canvas.toDataURL('image/png'); // 顯示在dom，測試用 (function(flag = true) { if (!flag) {return;} let img = document.createElement('img'); img.src = src; document.body.appendChild(img); })(0

); // 設定屬性 video.setAttribute('poster', src); }); // ------------------------------------------------------------------------------------- //檢測視訊播放狀態： //播放按鈕 let playBtn = video.parentNode.childNodes[2].nextSibling; //設定狀態 function vidplaySate

(e) { if (video.paused) { video.play(); playBtn.classList.add('pause'); } else { video.pause(); playBtn.classList.remove('pause'); } } //點選監聽 video.addEventListener('click', vidplaySate, false); playBtn.addEventListener('click', vidplaySate, false); //結束監聽 video.addEventListener('ended',function () { playBtn.classList.remove('pause'); }); }; //視訊： let videos = document.querySelectorAll('video'); videos.forEach((video) => { setMedia(video); });

HTML5的多個video標籤：擷取視訊源的封面圖poster，監聽視訊播放狀態的功能；

HTML5的多個video標籤：擷取視訊源的封面圖poster，監聽視訊播放狀態的功能；

HTML5 單個或者多個Video標籤視訊載入第一幀方法（poster屬性）

HTML5-video標籤-實現點選預覽圖播放或暫停視訊

錄製的視訊在html5網頁中用video標籤無法播放的解決方法

awk -F選項同時指定多個符號做為分割符時遇到空格坑，題目：請執行命令取出 linux 中 eth0 的 IP 地址

mysql 多個timestamp 錯誤：there can be only one TIMESTAMP column with CURRENT_TIMESTAMP

一個頁面有多個script標籤時，執行順序

jquery實現同時展示多個tab標籤+左右箭頭實現來回滾動（美化版增加刪除按鈕）

HTML5中新增video標籤的使用方法

迴圈獲取多個input標籤的值

html5 如何自制video標籤的播放進度條

vue實現點選多個tab標籤開啟關閉多個頁面

Tomcat 多域名部署多個專案一覽：

微信小程式 cover-view 覆蓋多個video元件

同一個頁面，多個script標籤中Javascript執行問題

前端之HTML-多個Img標籤之間的間隙處理方法

js 獲取a標籤被點選的連結，有多個a標籤

HTML之多個IMG標籤的間距

獲取多個input標籤，並動態改變input標籤的name屬性

Html5中的 video標籤無法關閉攝像頭

HTML5的多個video標籤：擷取視訊源的封面圖poster，監聽視訊播放狀態的功能；

相關推薦