2

I have a presentation made on Adobe Presenter which is embedded using an iframe. Autoplay was hard-coded in when the presentation was published. when the page is loaded the presentation starts automatically and the audio plays.

Since I can't turn off autoplay I thought adding a play/pause button and using JQuery to add a class which changes from display:hidden to display:block reveal the presentation and hide it when finished. I tried this but even when the iframe is hidden the audio starts automatically when the page loads.

Is there an alternative property in CSS to display which can completely remove an element and bring it back rather than just hiding it? or does anyone have another idea of how I might give the user the option of when they start the presentation?

Michael A
  • 9,480
  • 22
  • 70
  • 114
mackswel
  • 23
  • 2

2 Answers2

0

Hi you can do something like this for a play pause button. It will just stop and start the video on click of whatever class you replace over .video. I dont know why you want to display:none etc so i have not included that part in.. if you expand i can edit my question so it fits well for you.

jQuery( document ).ready(function($) {
    $('.video').click(function() {
        $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
    });
});

EDIT
or rather:

jQuery(function($) {
    $('.video').on("click", function() {
        this[ this.paused ? "play" : "pause" ]();
    });
});

A pure javascript way would be

Play:

document.getElementById('videoId').play();

Pause:

document.getElementById('videoId').pause();
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Josh Stevens
  • 3,943
  • 1
  • 15
  • 22
  • Sorry for my edit - Added a slightly better example to your code that uses `this` instead of `$(this).get(0)`. Hope you don't mind ;) – Roko C. Buljan Jul 20 '15 at 11:59
  • yeah thats a neater way looking back at it @RokoC.Buljan no worries :) – Josh Stevens Jul 20 '15 at 12:00
  • Any way, you're showing OP just how to toggle play/pause a video. If you read carefully OP has an iframe that has a Video which starts automatically. The question was how to: from the page that embeds the iframe -> control that video element and don't make it run/autostart. – Roko C. Buljan Jul 20 '15 at 12:06
  • Hi, thanks for getting back to me so quick. Roko is right, I already have controls to play and pause the video. my issue is that the presentation is half way down the page so when the page loads, it auto plays and starts talking before the user has a chance to read through the introduction and find it. Which is why I tried controls which toggled Display:none/Display:block which worked but the audio would still autoplay when the page loaded even when the presentation wasn't visible. Any ideas on how to stop this or maybe directly access the pause/play buttons inside the iframe when it loads? – mackswel Jul 21 '15 at 10:00
0

After much hard grueling googling, I decided there was no solution. I have managed to turn off the autoplay though. but it means individually downloading each presentation from the server, editing the XML and uploading them again... There's thousands.

Thanks for anyone who spent any time pondering this unsolvable problem.

And to anyone with a similar problem who reaches this post months down the line, don't waste as much time as I did trying to find a work-around and just accept defeat... there's no faster way.

mackswel
  • 23
  • 2