H5+C3做出優(yōu)酷視頻截圖效果

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:06:02

H5+C3做出優(yōu)酷視頻截圖效果

H5+C3做出優(yōu)酷視頻截圖效果:這次給大家?guī)鞨5+C3做出優(yōu)酷視頻截圖效果，H5+C3做出優(yōu)酷視頻截圖效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一般的視頻網(wǎng)站對(duì)于用戶上傳的視頻，在用戶上傳完成后，可以對(duì)播放的視頻進(jìn)行截圖，然后作為視頻的展示圖。項(xiàng)目中也可以引入這樣的功

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀H5+C3做出優(yōu)酷視頻截圖效果:這次給大家?guī)鞨5+C3做出優(yōu)酷視頻截圖效果，H5+C3做出優(yōu)酷視頻截圖效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一般的視頻網(wǎng)站對(duì)于用戶上傳的視頻，在用戶上傳完成后，可以對(duì)播放的視頻進(jìn)行截圖，然后作為視頻的展示圖。項(xiàng)目中也可以引入這樣的功

這次給大家?guī)鞨5+C3做出優(yōu)酷視頻截圖效果，H5+C3做出優(yōu)酷視頻截圖效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

一般的視頻網(wǎng)站對(duì)于用戶上傳的視頻，在用戶上傳完成后，可以對(duì)播放的視頻進(jìn)行截圖，然后作為視頻的展示圖。項(xiàng)目中也可以引入這樣的功能給用戶一種不錯(cuò)的體驗(yàn)，而不是讓用戶額外上傳一張展示圖。

效果圖：

看起來還是很不錯(cuò)，下面我給大家分析下，極其核心代碼很簡單：

核心代碼就這幾行，利用了ctx.drawImage時(shí)，第一個(gè)參數(shù)可以為video對(duì)象，然后就是通過canvas拿到DataUrl，賦值給Img標(biāo)簽了。關(guān)鍵點(diǎn)就這些。

下面來看整個(gè)例子：

HTML:

<!DOCTYPE html> 
<html> 
<head> 
 <title></title> 
 <meta charset="utf-8"> 
 
 <style type="text/css"> 
 
 
 html 
 { 
 overflow: hidden; 
 } 
 
 body 
 { 
 background-color: #999; 
 } 
 
 video 
 { 
 display: block; 
 margin: 60px auto 0; 
 } 
 
 #shotBar 
 { 
 position: absolute; 
 bottom: 5px; 
 height: 120px; 
 width: 98%; 
 background-color: #000; 
 box-shadow: -5px -5px 10px #fff; 
 border-radius: 5px; 
 padding: 2px; 
 overflow: auto; 
 } 
 
 #shotBar img 
 { 
 border: 3px solid #fff; 
 border-radius: 5px; 
 height: 110px; 
 width: 210px; 
 margin-left: 4px; 
 } 
 
 
 </style> 
 
 <script type="text/javascript" src="../../../jquery-1.8.3.js"></script> 
 
 <script type="text/javascript" src="videoshot.js"></script> 
 
 <script type="text/javascript"> 
 
 $(function () 
 { 
 ZhangHongyang.click2shot.init(); 
 }); 
 
 </script> 
 
 
</head> 
<body> 
 
 
<video src="media/style.mp4" controls id="video"> 
</video> 
<p id="shotBar"> 
</p> 
</body> 
</html>

html和css都是相當(dāng)簡單的。

主要看Js的代碼:

需要注意的是，video.canplay事件中獲取完屬性和一些操作后，一定要removeEventLinstener，否則暫停播放會(huì)一直調(diào)用此方法。點(diǎn)擊事件時(shí)，會(huì)暫停video，然后在video的位置生成一張圖片，使用jquery動(dòng)畫移動(dòng)到縮略圖的位置，然后移除文檔，縮略圖顯示，造成的動(dòng)畫效果。

得到圖片之后的上傳之類的操作，大家可以自己添加。還有很重要的一點(diǎn)：canvas.toDataURL("image/png");可能需要在服務(wù)器中訪問才能正常使用，我把寫好的頁面拖到了tomcat中，大家可以隨便啟動(dòng)個(gè)什么服務(wù)器，不然會(huì)報(bào)安全問題。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

H5+C3做出優(yōu)酷視頻截圖效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：視頻截圖優(yōu)酷

熱門焦點(diǎn)

H5+C3做出優(yōu)酷視頻截圖效果

H5+C3做出優(yōu)酷視頻截圖效果

H5+C3做出優(yōu)酷視頻截圖效果

最新推薦

猜你喜歡

熱門推薦