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.
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...
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>
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 attempting to implement a background video simiilar to this. Stretching the full screen but maintain a height of 400px. How may I achieve this without JavaScript? Heres the HTML I have so far
<div class="project__three">
<div class="grid">
<video src="./videos/test.mp4" id="bg-video" muted autoplay loop ></video>
</div>
</div>
I wrote a blog post about this a while back. I don't think you're using the video tag correctly. I think it should look more like this:
<video muted autoplay loop>
<source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
<source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
<source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
I'm pretty sure you have to include the "ogg" and "webm" extensions for HTML5 video to fully work.
Here is a link to my post where go into full detail.
This works with the above, doesn't look great though.Put it in your css
video{
webkit - transform:scaleX(2);
moz - transform:scaleX(2);
transform:scaleX(2);
}
Trying to add clickable hyperlinks to html video using the .vtt format.
Here is example captions.vtt file
WEBVTT
00:05.100 --> 00:06.000
[www.stackoverflow.com] // trying to convert this into a clickable link
00:08.000 --> 00:09.225
[ Splash...splash...splash splash splash ]
00:10.525 --> 00:11.255
[ Splash, Sploosh again ]
and here is my html5 video code
<video id="example_video_1" class="" controls preload="none" width="640" height="264"
poster=""
data-setup="{}">
<source src="video/video1.mp4" type='video/mp4' />
<source src="video/video1.webm" type='video/webm' />
<source src="video/video1.ogv" type='video/ogg' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
It can be done with video-js player. To the video-js css file, or in the html file where your video is, add some styles like...
.video-js .vjs-text-track-display p.bigred {color:#f00;font-size: 36px}
Apply that in your vtt, like this:
00:05.100 --> 00:06.000
<p class="bigred">Splash...splash...splash splash splash
Did it work? If so, add this to your css:
.video-js .vjs-text-track-display a:link {color: #00f}
Add that to your vtt like this:
00:05.100 --> 00:06.000
Click here
Works in Windows Chrome, Firefox, IE10 and above, on Ipad (but not on iphones)
This is currently not possible, according to this comment
About links on text in subtitles - this was discussed early on in the definition of WebVTT, but rejected because TV subtitles don't have it. I personally think it's a good idea though, so we should discuss this for the next version of WebVTT.