Hey so I found this great post here about how transparent videos are done Can I have a video with transparent background using HTML5 video tag?. So I searched a bit more and found http://www.sciencelifeny.com/transparency/transparency.html# this post with kind of a "tutorial".
I tried to copy that page one to one but couldn't get the video to render in canvas. Then I tried to use "SeeThru" which also wasn't successful. So has anyone tried SeeThru or JakeArchibald.com's technique himself and could tell me what I am doing wrong?
<html>
<head>
<script type="text/javascript" src="seeThru.js"></script>
</head>
<body>
<video autoplay="" loop="" id="movingAlphaDemo">
<source src="kolor.mp4" type="video/mp4">
</video>
<canvas width="720" height="1080" class="seeThru-display"></canvas>
<canvas width="720" height="2160" class="seeThru-buffer" style="display: none;"></canvas>
</body></html>
Related
When I run this code in Chrome:
<html>
<head><title>form</title>
</head>
<body>
<video width="100" height="100" controls>
<source src="G:\Users\tanmay\Documents\Apowersoft\ApowerREC\20180923_112116.mp4" type=video\mp4>
</video>
</body>
</html>
the following display is seen:
As mentioned in the comments, your link format is wrong.
Add file:/// in front of your drive letter since not from web (eg: is not http://).
Browsers use the Unix style / for slashes, not the Microsoft/Windows \ style.
<html>
<head><title>form</title>
</head>
<body>
<video width="100" height="100" controls>
<source src="file:///G:/Users/tanmay/Documents/Apowersoft/ApowerREC/20180923_112116.mp4" type=video/mp4>
</video>
</body>
</html>
Try to use above code.Hope this will help you...
I am trying to make a website where I have multiple videos on it. When I run the code, only the first video loads. No matter what I do, the second video will not play or load. Why doesn't my second video load?
Here's my code:
<html>
<head>
<title>Andrew soundboard!</title>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Andrew Soundboard!</h1>
<br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3558.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3558.mp4">
</object>
</video>
<br>
FREAK OUT #1
<br><br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3559.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3559.mp4">
</object>
</video>
<br>
STOP IT!
</body>
</html>
There doesn't appear to be anything wrong with your code. So the possible issues are:
Is your video on your server (or if running on computer, in an accessible folder)?
Are you linking to your video correctly (in the right file, etc.)?
Does your video have the exact same file name as your HTML?
Does your video have the EXACT same file extension as your HTML? (.mp4, .mov, etc.)
Hope this helped!
I want to add video which is of format (mp4) to my page using flash player (not html5). I have tried this using Flowplayer but I am not able to do this:
<html>
<head></head>
<body>
<div class="flowplayer is-splash"
data-engine="flash"
data-swf="../dist/flowplayer.swf">
<video src="http://d32wqyuo10o653.cloudfront.net/Extremists.m4v" preload="none"></video>
</div>
</body>
</html>
Can someone please explain this? I searched a lot experimented a lot but didn't get results.
Try this it's working from me!
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="http://d32wqyuo10o653.cloudfront.net/Extremists.m4v" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
If you want only use the flowplayer flash version, you can do something like this :
<html>
<head>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
</head>
<body>
<script>
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script>
</body>
</html>
You can see this code working on codebeautify.org here.
Hope that can help.
I'm facing this problem with skrollr: everything goes fine, then when adding a video, it continues playing if out of viewport, even if the div has a display:none declaration. I tried searching here and Google but couldn't find anything and at this point I'm really lost.
For reference, this is the code I'm using:
<div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" >
<video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}">
<source src="videos/vid.webm" type='video/webm' />
<source src="videos/vid.mp4" type='video/mp4' />
</video>
</div>
any help on how to achieve this really appreciated
Use
skrollr.init({
render: function(data) {
//get current element opacity and position then play or pause the video
}
});
See http://jsfiddle.net/ybP6b/ for a working example
The video plays just fine in every browser, and I use the standard 3-codec approach. On every other browser, the video "melts" into the white background intentionally, but in Safari, the video appears gray and ruins the effect - any ideas why?
Homepage: http://www.mybloodfirst.com
Simplified test page: http://new.mybloodfirst.com/videotest.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Progress Monitor</title>
</head>
<body>
<div align=center>
<video preload="none" autoplay loop>
<source src="images/home-surgeon.webm" type='video/webm;' />
<source src="images/home-surgeon.ogv" type='video/ogg;' />
<source src="images/home-surgeon.mp4" type='video/mp4;' />
<img src="images/home-surgeon.jpg">
</video>
</div>
</body>
</html>
I have not tested, but perhaps the issue has to do with the ordering of your <source> tags. Try putting the mp4 one first. I am unfamiliar with the exact specifics of WebM and OGG support in Safari, but I would guess it isn't nearly as good as MP4.