|
Klijentske aplikacije (X)HTML, CSS, JavaScript, AJAX... |
|
Alatke vezane za temu | Vrste prikaza |
24.5.2015, 17:35 | #1 |
Veteran
Član od: 7.9.2012.
Poruke: 818
Zahvalnice: 131
Zahvaljeno 151 puta na 129 poruka
|
Potrebna pomoć: ubacivanje videa u canvas
Trebala bi mi pomoć kako da ubacim video sadržaj u canvas, tačnije radi se o web dizajnu, notepad++, html, css i javascript. Imam jedan kod u javascript koji ne prikazuje snimak i deo koda iz html koji prikazuje video.
Deo koji radi iz html. Kod:
<button onclick="playVid()" type="button">Play Video</button> <button onclick="pauseVid()" type="button">Pause Video</button><br> <script> var vid = document.getElementById("myVideo"); function playVid() { myVideo.play(); } function pauseVid() { myVideo.pause(); } </script> <video loop controls id="myVideo" width="640" height="480"> <source src="A Brief History of Video Games.mp4" type="video/mp4"> <source src="A_Brief_History_of_Video_Games.ogv" type="video/ogg"> Your browser does not support HTML5 video. </video> I jedan koji ne radi iz js. Kod:
<canvas id="canvasOne" width="500" height="300"> Your browser does not support HTML5 Canvas. </canvas> var videoElement; var videoDiv; function eventWindowLoaded() { videoElement = document.createElement("video"); videoDiv = document.createElement('div'); document.body.appendChild(videoDiv); videoDiv.appendChild(videoElement); videoDiv.setAttribute("style", "display:none;"); var videoType = supportedVideoFormat(videoElement); if (videoType == "") { alert("no video support"); return; } videoElement.addEventListener("canplaythrough",videoLoaded,false); videoElement.setAttribute("src", "muirbeach." + videoType); } function supportedVideoFormat(video) { var returnExtension = ""; if (video.canPlayType("video/webm") =="probably" || video.canPlayType("video/webm") == "maybe") { returnExtension = "webm"; } else if(video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe") { returnExtension = "mp4"; } else if(video.canPlayType("video/ogg") =="probably" || video.canPlayType("video/ogg") == "maybe") { returnExtension = "ogg"; } return returnExtension; } function canvasSupport () { return Modernizr.canvas; } function videoLoaded(event) { canvasApp(); } function canvasApp() { if (!canvasSupport()) { return; } function drawScreen () { //Background context.fillStyle = '#ffffaa'; context.fillRect(0, 0, theCanvas.width, theCanvas.height); //Box context.strokeStyle = '#000000'; context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10); //video context.drawImage(videoElement , 85, 30); } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); videoElement.play(); function gameLoop() { window.setTimeout(gameLoop, 20); drawScreen(); } gameLoop(); } Poslednja ispravka: hacker_aca (25.5.2015 u 2:01) Razlog: Preseljeno iz druge teme |
Bookmarks sajtovi |
Alatke vezane za temu | |
Vrste prikaza | |
|
|
Slične teme | ||||
tema | temu započeo | forum | Odgovora | Poslednja poruka |
[Android] World of Tanks Blitz Android! | King SRB | Igre za mobilne telefone | 36 | 19.1.2017 14:58 |
Potrebna pomoć oko wirelessa | LoneWolf | Komunikacioni uređaji i umrežavanje | 4 | 29.4.2012 11:05 |
Potrebna pomoć u vezi instalacije [UBUNTU] | koaKsi | Slobodni softver | 23 | 25.12.2011 0:36 |
Potrebna pomoć u vezi novog HDD-a :-( | Fatamorgana | ŠDK - Nosači podataka | 17 | 12.12.2011 17:13 |