I am trying to add a static image as fallback for video background in html 5 but not getting the output can anyone help.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
Check for you image path and replace the <video> tag in the title with < >
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
<img src="/media/staticimage.jpg"
title="Your browser does not support the <video> tag">
Video not supported
</video>
</div>
I suggest that instead of using an image inside the video area, you use a background image.
#video-bg-elem {background-image: url(media/staticimage.jpg);}
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted>
<source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
Video not supported
</video>
</div>
Related
I have added a text overlay with href link, its working with html5 video, but when i switch video in fullscreen mode, href link is not working, I can see the text(ui) in the fullscreen mode video, but unable to click.can anyone help me?
Jsfiddle
<video id="v" controls>
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="overlay">
This is HTML overlay on top of the video! </div>
thanks
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
This question already has answers here:
Display fallback image even if the browser supports html5 video
(2 answers)
Closed 6 years ago.
I have extensively read and tried every solution in other threads with no luck.
My issue is this: when a browser does not support video tag, the backup image that I have set up does not show, and the video-div shows nothing but the background of body.
Here is the code I am using for the video/image:
<div id="video-div">
<video id="landing-video" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
<img src="images/landing-video-backup.JPG" title="Your broswer does not support the <video> tag"/>
</video>
From MDN
poster
A URL indicating a poster frame to show until the user plays or
seeks. If this attribute isn't specified, nothing is displayed until
the first frame is available; then the first frame is shown as the
poster frame.
You need to use poster attribute not an image tag.
<video id="landing-video" poster="images/landing-video-backup.JPG" autoplay loop>
<source src="images/landing-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/landing-video-webm.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
I am trying to display my Subtitles in video. I have mp4 video and ttml file for the video. When put it in html code, the video is playing but no subtitle is coming[Checked in chrome].
When I checked in IE11 it shows the CC option in the HTML5 video player but there also no subtitle is coming.
Here is what I have tried
http://jsfiddle.net/ilaiya/s49zessy/
<video controls autoplay height="400" width="400">
<source type="video/mp4" src="https://ccdpoc.blob.core.windows.net/asset-b82767bd-bf28-4e03-a2d2-329d6df2b633/Index.mp4?sv=2012-02-12&sr=c&si=107ca7bf-272e-48a9-b824-a48da8b7fe90&sig=o8PPGNFD6k0B7PMwdvZdjEy%2FuRc2r4urqqFd5GJyN2k%3D&st=2014-12-10T10%3A40%3A14Z&se=2016-12-09T10%3A40%3A14Z">
<track src="https://ccdpoc.blob.core.windows.net/sourceaes34/subtitle.ttml" label="English subtitle" kind="subtitles" srclang="en-us" default>
</video>
Chrome does not support TTML out-of-band text tracks. Currently, only WebVTT can be used inside of the element.
In general, Chromium is trying to remove XML from Blink: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/vXuOTK5M0hM.
Hi im using mediaelement player wich is great actually, the problem is even if i convert the file to all the formats, in ipad is strange some times i just hear audio, some times nothing plays , and just once, just one time the video play with the play image logo all the time over it.. what is wrong with my mediaelement code
<div class="videoquon">
<div class='my-video-close' onclick='player.pause();'></div>
<div id="marfvideo"><video width="530" height="377" id="player" controls="controls">
<source src="media/mp4/ingles.mp4" type="video/mp4" title="mp4">
<source src="media/webm/ingles.webm" type="video/webm" title="webm">
<source src="media/ogv/ingles.ogv" type="video/ogg" title="ogg">
<source src="media/flv/ingles.flv" type="video/flv" title="flv">
<p>Tu navegador necesita ser actualizado.</p>
</video></div>
<script>
$('audio,video').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 530,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 377,
autosizeProgress: true,
// Hide controls when playing and mouse is not over the video
features: ['playpause','progress','current','duration','tracks','volume','sourcechooser','fullscreen'],
alwaysShowControls: false
});
</script>
<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player');
// ... more code ...
</script>
</div>