js HTML5多媒體影音播放
之前曾經(jīng)介紹過,在HTML5中可以通過<video>標(biāo)簽在網(wǎng)頁中播放影片,且不需要再安裝額外的插件,此功能已經(jīng)帶給用戶極大的便利。但基本的<video>標(biāo)簽只提供了簡單功能的播放器界面,如果想要改變播放器的外觀和功能,只能結(jié)合<canvas>標(biāo)簽和javascript語句,就能制作出酷炫的播放控制器。
{drawImage}
畫布canvas如何與視頻video標(biāo)簽結(jié)合,達(dá)到制作各種視頻功能的效果呢?其秘訣在于通過畫布重新描繪一次視頻的內(nèi)容,將視頻的每個畫面都轉(zhuǎn)換成畫布的圖像,這樣就可以通過javascript語言所提供的圖像控制方法來操控它們。所以炫酷播放器所使用的視頻功能,并不針對video,而是針對描繪出影像的canvas。
能夠描繪影像到畫布中的方法是“drawImage",此方法允許在canvas中插入畫布(canvas),圖像(img)和視頻(video)等元素。
drawImage方法有三種:
drawImage(image,dx,dy)//原比例繪制圖像
drawImage(image,dx,dy,dw,dh)//按設(shè)置長寬繪制圖像
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//裁切后繪制圖像
<html> <head> <meta charset="utf-8"/> <style> canvas{ border:1px solid black; } </style> <script > function draw(){ var imgx = new Image(); imgx.src = 'img/gophers-Slice_Scoreboard.png'; imgx.onload = function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.drawImage(this,20,20,75,75); } } </script> </head> <body onload="draw()"> <p>Image:</p> <img id="pic"src="img/gophers-Slice_Scoreboard.png" alt="pic" width="50" height="50"> <p>Canvas:</p> <canvas id="myCanvas" style="border:1px solid;"> </canvas> </body> </html>
簡單地通過drawImage描繪圖像也許看不出來canvas的強大,其實真正精彩的是可以通過畫布上描繪的結(jié)果加入javascript語句來實現(xiàn)的特效效果或功能。
接下來示范如何用javascript指令動態(tài)調(diào)整視頻播放器的大小。
<html> <head> <meta charset="utf-8"/> <style> </style> <script > function eventWindowLoaded(){ var videoElement=document.getElementById("theVideo"); var widthtoHeightRatio=videoElement.width/videoElement.height; var sizeElement=document.getElementById("videoSize"); sizeElement.addEventListener('change',videoSizeChanged,false); function videoChanged(e){ var target=e.target; var videoElement=document.getElementById("theVideo"); videoElement.width=target.value; videoElement.height=target.value/widthtoHeightRatio; } } </script> </head> <body onload="eventWindowLoaded()"> <div> <form>Video Size: <input type="range" id="videoSize" min="80" max="1280" step="1" value="320"/> </form> </div> <div> <video autoplay loop controls id="theVideo" src="funny.mp4" width="320" height="240"></video> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本
這篇文章主要介紹了javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本的相關(guān)資料,需要的朋友可以參考下2017-02-02JavaScript實現(xiàn)簡易計算器功能的兩種方法
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07JS和Canvas實現(xiàn)圖片的預(yù)覽壓縮和上傳功能
這篇文章主要介紹了JS和Canvas實現(xiàn)圖片的預(yù)覽壓縮和上傳功能,實現(xiàn)此功能大概有兩步,第一步用戶選擇需要上傳的圖片,第二步獲取圖片資源壓縮預(yù)覽上傳,具體實現(xiàn)代碼大家參考下本文2018-03-03JS實現(xiàn)判斷滾動條滾到頁面底部并執(zhí)行事件的方法
這篇文章主要介紹了JS實現(xiàn)判斷滾動條滾到頁面底部并執(zhí)行事件的方法,本文先是分析了需求以及必備知識,然后給出實現(xiàn)代碼,需要的朋友可以參考下2014-12-12layer實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口的例子
今天小編就為大家分享一篇layer實現(xiàn)登錄彈框,登錄成功后關(guān)閉彈框并調(diào)用父窗口的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
這篇文章主要介紹了微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09JS庫particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)
particles.js用于創(chuàng)建粒子的輕量級 JavaScript 庫。使用方法非常簡單,代碼也很容易實現(xiàn),下面通過本文給大家分享JS庫particles.js創(chuàng)建超炫背景粒子插件附源碼下載,需要的朋友參考下吧2017-09-09