I am using reveal.js for a demo application in which I mix simple slides with slides with audio and slides with audio and video. In order to have this demo advance by its own, I use the setting as follows
<script>
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: false,
autoSlide: 3000,
dependencies: []
});
the important parameter is autoSlide set to 3 sec. This generates a play/pause button to show up. Depending on my slides, I can also do control the timing with per-slide parameters set here to 14 seconds.
<section data-autoslide="14000" data-background="#4d7e65" >
<h1>onto the admin view</h1>
<video data-autoplay src="video/test2.mp4" width="100%" height="100%"></video>
</section>
my question: how can I make my video and/or audio files pause and play per this control. Currently when I hit the stop button, the slides will not advance anymore,but the video and audio continue to play. I have not seen anything in the documentation.
Maybe I miss something
many thanks
Peter
You may want to have a look at the audio-slideshow plugin that might do what you are looking for. With the plugin you can use the normal audio player controls for audio (and video). When the audio file is played completely the slideshow automatically advances with the next slide.
You can find a demo here and the plugin here
Asvin
Related
I can't find a simple yes/no answer - maybe my inability to ask the right question. I'm probably not seeing the obvious.
https://developers.google.com/youtube/iframe_api_reference
If I set-up the iframe api example as per the linked page, with an appropriate header (e.g. viewport etc.) then when I view the page in Chrome on the desktop, I can click on the video area to play, and pause the video. I do not need to use the play/pause control.
If I view the same site on my Note 4, I can touch the video area to play. But in order to pause, I have to click on the (now tiny) pause control. Touching the video area does nothing.
I know I can programmatically add some other element and initiate a pause via the API ... but I don't think I can add a touch or onclick event to the player ... and the player state change event won't be any good if the player isn't changing state on subsequent touches?
Yes / No (trying to keep within non-vague / discursive guidelines) ... is it possible, without "hacks" to pause the video, on mobile, with a touch to the video area?
I suspect not, as YouTube's own site, on my Note 4, behaves in the same way. I just can't find any discussion/questions about it. I ask the question, as it seems counter-intuitive to reduce the control area on a smaller touch device for pausing. It's annoying to me ... trying to use embedded YouTube in CSS3D where I have a video-wall 2x2 and the controls become tiny. I might have to overlay a transparent control element for touch but just want to check I haven't gone mad.
Just a quick question on this and how I can get a youtube video to stop playing when exiting a modal.
We have this homepage slider > https://www.bababing.com/
You can see that when you click on a tile in the slider it opens and starts playing the video. However, when you exit it still plays the video.
Is there anyway we can stop his happening that anyone knows of?
We are using fancy box to open the lightbox area.
Upon the video opening I also want it to autoplay the videos
Any thoughts would be fantastic
Thanks,
Glen
You have youtube player code inside inline content, but the script literally moves your content into the modal and puts back after closing. Therefore, if user interacts with your content, it stays the same after closing the modal.
You have several options:
1) You could use Youtube API to stop/start videos after content is displayed/hidden;
2) Display cloned version of your content (e.g., something like $.fancybox.open( $('my-element').clone(true) ); ), but then you probably still would need to use Youtube API to start video;
3) Build your own content on click event - something like $.fancybox.open( 'there will be youtube iframe code with autoplay option and something more' ); - this way you will avoid messing with Youtube API
4) Use direct links to Youtube like https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1 - the script will then parse it and load inside iframe automatically
I have been successfully running the example, Creating a Video Application: http://www.samsungdforum.com/Guide/tut00055/index.html
What I am trying to figure out is how I can smoothly transition from one video to another using a cross fade or any other transition. In this example you are forced to call stop on the player before loading up another video causing a black flash in between.
I've tried going down the path of creating two Video instance one behind eachother and using JQuery to fade out/fade in but I am having a lot of trouble. it appears jquery fades don't even apply to the video element. Also, Is there some kind of limitation with playing two videos at the same time? Is there a better way to go about this? Would it be better to look into doing this using WebGl instead?
Thanks!
If you use Samsung API you can play only one video at time. I can't find documentation page at the moment.
You can try different approaches:
use html5 <video> tag, maybe browser will be capable of playing 2
of them.
use screenshot from second video, and fadeOut it over video
before stopping first video and starting next.
you can recode your videos in 1 continious video in any video editing software. If you need to switch between videos, you can jump to position of next video start.
I wanted to use a youtube video as a background for my website (mostly because of their bandwidth check and setting the video quality). When I try to autoplay and loop it though (via setting loop and autoplay parameters), I still have the circular loader there. Is there any chance to automatically start the video with no delays (even if it's going to be a bit laggy on the first load) and then just progress with the download, or should I just give up on it?
Thanks,
E.
E: iframe code here:
<iframe src="//www.youtube.com/embed/VID_ID?autoplay=1&loop=1&rel=0&playlist=VID_ID " frameborder="0" allowfullscreen></iframe>
I don't think it's possible to immediately start loading your video from YouTube. How about downloading it (I like to use http://www.convertfiles.com) and then using that? It'll probably be easier to customize your video options when you have it downloaded on your website.
My iOS application uses youtube iframe player on UIWebView to play any clip with inline mode. The following code is HTML code used.
<html>
<head>
<style type="text/css">body {background-color: transparent;color: white;}</style>
</head>
<body style="margin:0">
<iframe src="http://www.youtube.com/embed/e2w8z6mI47U?playsinline=1&rel=0&showinfo=0" width="320" height="240" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then, it is passed to loadHTMLString method.
That code had worked well until a recent date. But, I recently noticed that every clips I used aren't played normally. the standby view and play button is shown but, although I pushed the play button, it didn't play well. black screen was only shown.
I haven't found anything to solve the problem. Are there any changes of Youtube Iframe player or points I missed?
I ended up solving the problem by calling [videoView setMediaPlaybackRequiresUserAction:NO].
I don't exactly know why the method could save me. At a guess, there was a change dealing with the request for playing at youtube. I could find the following changes on youtube developer site.
January 28, 2014
The playsinline parameter controls whether videos play inline or
fullscreen in an HTML5 player on iOS. Setting the value to 1 causes
inline playback.
The Selecting content to play section has been updated to explain how
to find YouTube video IDs and playlist IDs using the YouTube Data API
(v3) rather than the older API version.
The controls parameter's definition has been updated to reflect the
fact that the parameter value only affects the time that the Flash
player actually loads in IFrame embeds. In addition, for IFrame
embeds, the parameter value also determines when the controls display
in the player. If you set the parameter's value to 2, then the
controls display and the Flash player loads after the user initiates
the video playback.
I guess that one of above changes may need extra informations which are passed from a client to youtube server for playing normally.
UPDATE:
Today, I identified that it works well without my solution. It seems that the problem was fixed lately.