I'm learning to use reveal.js and I find it very powerful.
I wonder wether it's possible to make reveal play a sound at each slide transition.
I made a presentation with the auto-sliding option on and it would be usefull to have a sound when the slide changes.
Can someone help me ?
Thanks
You can use the data-autoplay attribute for this, it works for both video and audio elements. When this attribute is present on a media element inside of reveal.js that element will play/pause automatically as you enter/leave the slide it lives in.
<section>
<audio data-autoplay src="yourAudioFile.mp3"></audio>
</section>
https://github.com/hakimel/reveal.js#embedded-media
Related
<iframe src="snip?showinfo=0&controls=0&rel=0"></iframe>
JSFiddle. All controls, including the title, are hidden before and during playback, but when the video ends, the title appears, ignoring the showinfo setting. Is this the intended behavior?
Not worth asking another question. Is it possible to hide the YouTube watermark with this setup?
To answer the first question, this is the intended behavior. YouTube wants the the person on the other end to click on more videos.
As for the second, what you're looking for is the modestbranding=1 parameter. Unfortunately you have to use that parameter first and you can't use it with showinfo=0. I guess YouTube has to get some type of credit right? There may be a tweak out there or an unlisted parameter. I'll give it a few more shots.
Also here you'll find an explanation from Brian Glick at YouTube for this functionality.
I know I'm late, but since this question was never answered...
The title only shows up when you're using the HTML5 playback if enabled and when the video is embedded via iframe. The Flash playback does not show the title in the end.
You can hide/cover up the title using the YouTube iFrame API with if (event.data == YT.PlayerState.ENDED). Be aware though, that YouTube doesn't allow to you to cover up too much. As long as there is a visible (no right-click) link-back to YouTube like the watermark, the logo in the controls or the clickable title, you should be fine.
I am trying to add custom controls to an embeded YouTube player. I am overlaying a html menu. However, when a user clicks on the full screen button within YouTube my html menu will no longer be available on the larger player.
There are two possible solutions I foresee.
First, if I could figure out the element that is generated for the fullscreen player then I could overlay controls on this.
Second, if I could grab the fullscreen click event I could use javascript to get the current available window demenisions an scale the video to the available realestate.
I found this: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode?redirectlocale=en-US&redirectslug=DOM%2FUsing_full-screen_mode
However, I am not sure if it would work in most browsers and second it looks like it is in the test phase.
The answers I am looking for are:
What is the element or how can I find the element that is generated for the fullscreen player?
Or
How can I capture the click event for fullscreen?
Do you want to capture the click anywhere on the screen or on a link in a menu?
If you want to capture the click on a link on a menu I think this plugin can be useful as an example:
http://www.seanmccambridge.com/tubular/
https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js
I have a webpage with four VIDEO elements. I know that they elements won't even start loading any metadata until I explicitly trigger a touch event on them. Can I hook up an event handling function on the touch event on, say, a BUTTON element such that the "play" methods on all four VIDEO elements are invoked?
I mean something along these lines:
$b1.bind("touchstart", function (e) {
$v1.get(0).play();
$v1.get(0).pause();
$v2.get(0).play();
$v2.get(0).pause();
$v3.get(0).play();
$v3.get(0).pause();
$v4.get(0).play();
$v4.get(0).pause();
});
When I try this four separate QuickTime windows are opened with fullscreen videos. That's not the effect I want, but at least I can hook all four to the handler. The problem, though, is that only $v4 actually starts loading anything, and the other three apparently never start loading.
you cannot start multiple videos at once. Every time you start a video on iOS, the currently running video will be stopped. This is a performance restriction on all mobile apple devices. For the same reason the preload attribute has no relevance on current iOS devices.
I'm guessing you want the videos to be inline? then add webkit-playsinline as an attribute to each <video> element:
<video src="myvideo.mp4" webkit-playsinline controls>
that way you can arrange the 4 video-elements next to each other AND use native video-controls (e.g. to allow switching to native fullscreen later). If you want to implement your own controls leave out the controls attribute.
PS: following up on 0x60's link, you can find a section called iOS-Specific Considerations
Have you checked this out? Set your code to: <video preload="automatic" /> and it should preload.
I’m writing an HTML5 page with a embedded video tag for the iPad.
How can I hide or disable the fullscreen button? I just need to show the video without the fullscreen option.
As far as I know (I could be wrong, this isn’t really my area), you can’t tell Safari how to render its standard video controls.
However, you can tell it not to render its standard video controls (at least according to the HTML5 spec) by omitting the controls attribute from the video tag.
You can then write your own play/pause controls. (See e.g. http://diveintohtml5.ep.io/video.html#markup). That’s obviously a bit more work, but I think it’s your only option.
If you don’t want to write your own controls from scratch, there are a couple of good pre-built ones out there, specifically:
Video JS
Video for Everybody
They’re more focused on providing video via HTML5 or Flash depending on browser capabilities, but you might be able to extract the control parts, or at least see how they’re doing it.
I'm embedding windows media player in a windows sidebar gadget.
As soon as I start the player (even if i stop it after doing so), hitting WIN+D ("Show Desktop") hides my gadget (all other gadgets stay visible).
What's causing this issue and is there a way to fix this annoying behaviour?
The problem occurs both with a media player embedded in the HTML and with one created with new ActiveXObject(...).
As I was looking for an solution to this question (on StackOverflow). I found that 'styling' media player instance
<object id="mediaPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"></object>
with this CSS
#mediaPlayer {
position: absolute;
z-index: -1;
}
was all that it took to have it not disappearing.
EDIT:
'Unfortunately' this did fix it, except when you start the player once 'touched' the Gadget would disappear like before.
I did find a way to 'fix' it. It appears not to happen when you use video in the player. It doesn't care if it's viewable. So you could consider finding a video stream for the audio you want to hear. In my case: I wanted to build a Gadget for the dutch radio station 3FM, and include a video stream in the the end.
This was a challenge itself: nothing more annoying than a a-sync video/audio stream. So i had to really 'think outside the box': the flyout consists only of the station's logo. The gadget itself is 'viewable' within the specified range. Except the video stream-container-div is hidden until requested to view and I invoke the gadget's flyout. So in the end: I fixed it, but it's no solution to the original question...
For those interested in the solution: 3FM-2011.gadget download