I am having several videos in a Reveal.js presention added like this:
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
</section>
Everything looks as it should, but i want to loop some of the videos for mood in the background. I can not find any data attribute for looping data background videos. What is the best way to do it? Im having strange issues putting normal video tags in it and make it display fullscreen with css. ( described here Fullscreen Video with CSS). Any ideas for Reveal.js ?
I just checked and in the latest release (Reveal.js 3.1.0) you can do:
data-background-video-loop="loop" and the video will loop.
Related
I am using mobirise to develop interface for an Html website. In the gallery of mobirise, the videos are played by youtube by default. I have put mp4 videos instead to be played in a lightbox modal window of the gallery like this:
<div class="carousel-item">
<video src="videos\ocean.mp4" autoplay loop/>
</div>
The videos play fine but the width of the video doesn't increase. I have tried many options but none of them works. Can anyone tell me how to do this?
I guess that you use not a block with video background. If you use background video you, it's stretched all over the whole display. In this case, you can't use a music. After that, you can try to use small videos in the central part of a screenshot. It can't be stretched but you can listen to any music you want.
Please remember that you can bring any changes you want to your project manually after publication.
I am using React and Rails to build a small website with a few different page routes. On the landing page I have included an HTML 5 video, which is muted and autoplays. On this page it works great. However, when I change pages the HTML 5 video continues to play, and is no longer muted (ie. I can hear it playing, but cannot see it). I cannot see the component which contains the video in the DOM.
I think I might need to destroy this component when changing pages, but not exactly sure about the right approach here. Thoughts? Thanks in advance!
Hard to tell without providing any code, but I am guessing you aren't using lifecycle methods within your components.
Consider using componentWillUnmount to destroy/stop the playing video.
I would like to know how can I add an image in html when you load a vimeo video ?
Any informartion, links related or codes are welcome.
Thank you!!!
I guess you are talking about how to add a poster-like utility for Viemo videos, as done trough the poster HTML attribute when placing HTML5 videos.
Well, there's no such an option, as far as I know. When Vimeo is not active (as it has not been played yet) the video's thumbnail image is displayed, and when Vimeo's video is loading, it shows it's own loading animation.
Anyway, you can select your custom image when uploading your video on Vimeo, so, at least, by this way you can define what will be showing by default your custom player.
I'm building an EPUB3 ibook and want to incorporate audio.
I'm succeeding, in so far as that I have a screen on my iPad2 with a button to play the audio file.
But that button is ugly and way too big. I suppose it's some default button of Apple.
How can I influence the way the button looks?
The XHTML tag I use now is like this:
<audio controls="controls" src="dir1/sound.wav">sound.wav not present</audio>
That's all I do now. Nothing epub:type for this whatsoever.
Good question. Apple has royally failed on the audio player in this last iOS update... But the good thing is: you can build your own using Javascript!
You can find most of the main functions here: http://www.w3schools.com/tags/ref_av_dom.asp.
As long as the audio container is in the same chapter, you should be able to control it with the functions above (just hide it and don't show controls). Then you can use custom CSS to build your player from scratch (cool example here: http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081)!
You should also use .mp3 format for best file sizes and results...
Good luck!
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.