Pausing and resetting video on multi-page presentations

  • 3
  • Idea
  • Updated 3 years ago
  • Not Planned
  • (Edited)
I'm having issues with a multi-page presentation and any assistance would be greatly appreciated. I have 19 pages with 19 associated buttons. Each button enables a page/placeholder containing an HTML5 video widget. The videos are all WEBM format and stored in my Risevision storage. There are two problems I need to overcome. First, the buttons are showing and hiding the div layers properly, but they are also playing videos located on other pages. You can hear the audio from other pages. How can I ensure those gadgets remain paused/stopped upon clicking non-associated buttons. Also, I really need for the videos to start over once focus is placed on another page... or at least after a period of time. Any options for that?

Cameron, Berry College
Photo of Martha Berry

Martha Berry

  • 150 Points 100 badge 2x thumb
  • frustrated

Posted 3 years ago

  • 3
Photo of Martha Berry

Martha Berry

  • 150 Points 100 badge 2x thumb
Well I solved part 1 of my problem by commenting out the resetting of previousIndex in the default code:
//Play all Gadgets on the current page. play(index);
//previousIndex = index;

and then calling the pause function for that specific page index on every button click:
onclick="showPage('2');pause('19');"

Anyone know how to reset the HTML video to 0 or initial load in the javascript code? I have a feeling this can't be too hard, but I'm not familiar with the workings of HTML video and how to hook into it.
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Hi Martha,

I apologize for the frustration you have experienced.

Could you please forward your company name so I can look at your presentation in order to better assist you?

Thanks!
(Edited)
Photo of Martha Berry

Martha Berry

  • 150 Points 100 badge 2x thumb
The company name is Berry College and my name is Cameron. Martha Berry is simply the general Google account we use to access our Rise Vision account. The name of this presentation in question is Oak Hill Display.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Hi Cameron, The default nature of the video widget is to resume playing after it is paused so you wont be able to restart the video. This is something that would need to be added to our gadget.

I know you can make this work with the old video item but keep in mind it will be deprecated eventually.
Photo of Alan Clayton

Alan Clayton, Official Rep

  • 8,788 Points 5k badge 2x thumb
Hi Cameron, I've changed this Topic from a Problem to an Idea.

If anyone else would like to see the Video Widget restart a video from the beginning after being paused versus resuming where it left off, please make sure to "Like" this post. Thanks!
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
I have voted for this because I think there should be a clear way to denote the difference between "pause and keep position" and "stop and rewind to beginning", for videos and image folder slide shows.  I'm not sure whether this is already covered by the behaviors of pauseCmd() vs stopCmd(), or whether a separate rewindCmd() is needed.

The document on widget play/pause/stop discusses the differences between pause and stop in terms of play until done behavior, but does not address rewinding.  Maybe this should be mentioned as a best practice in the widget developer docs?
Photo of Martha Berry

Martha Berry

  • 150 Points 100 badge 2x thumb
So no option for a JavaScript or jquery snippet in the html that could do this since the player is html5-based?
Photo of Stuart Lees

Stuart Lees, Employee

  • 586 Points 500 badge 2x thumb
Hi Cameron, it's not possible to add further JS or jQuery to force the video to play from the beginning. 
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Sorry currently there is no way to do it with JS that I am aware of.
Photo of Martha Berry

Martha Berry

  • 150 Points 100 badge 2x thumb
I thought I had issue #1 of this post fixed, but it looks like the PAUSE function written into the example code doesn't actually pause a gadget on a particular page, but instead toggles it off or on. When I click a non-related button I need for the hidden video to remain paused.. not turn of and on every time I click another non-related button. Any thoughts?

The code in question is:
//Pause all Gadgets on a particular page.
function pause(index) {
for (var i = 0; i < ids.length; i++) {
if (ids[i].index == index) {
pauseCmd(ids[i].id);
}
}
}
Again.. if the function is called multiple times it just toggles the gadgets off and on... I don't want it to turn them on, only off (pause).
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
The method Ive used in the past is to index all my pages then pause all the gadgets on the previous indexed page and only play videos on the current page. 

Here is an example, just create a new presentation and replace the entire html with the following code. You will need to add a video widget to the video placeholder. 

The purple page has a video. If I switch between the blue page and green page several times and back to the purple page the video is always where it left off.
So hopefully this solves the issue you describe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://s3.amazonaws.com/risecontentfiles/interactive-shared/jquery.idle-timer.js"></scri...;
</head>
<body style="width:1920px;height:1080px; margin: 0; overflow: hidden;" >
<!-- Home -->
<div class="page" data-index="1" id="divHome" placeholder="true" style="width:1920px;height:1080px;left:0px;top:0px;z-index:1;position:absolute;background:rgb(159, 197, 232);background-size:contain;">
</div>
<!-- Purple Page -->
<div class="page" data-index="2" id="PurplePage" placeholder="true" style="width:1920px;height:1080px;left:0px;top:0px;z-index:3;position:absolute;background:rgb(180, 167, 214);background-size:contain;">
<div  id="video" placeholder="true" style="width:1021px;height:544px;left:537px;top:183px;z-index:4;position:absolute;"></div>
</div>
<!-- Green Page -->
<div class="page" data-index="3" id="GreenPage" placeholder="true" style="width:1920px;height:1080px;left:0px;top:0px;z-index:0;position:absolute;background:rgb(182, 215, 168);background-size:contain;">
</div>
<!-- main buttons -->
<div  id="btnHome" placeholder="true" onclick="showPage('1');" style="width:223px;height:193px;left:537px;top:799px;z-index:7;position:absolute;background:rgb(0, 0, 255);background-size:contain;"></div>
<div class="mainbtn" id="btnPurple" placeholder="true" onclick="showPage('2');" style="width:248px;height:193px;left:808px;top:802px;z-index:5;position:absolute;background:rgb(53, 28, 117);background-size:contain;"></div>
<div class="mainbtn" id="btnGreen" placeholder="true" onclick="showPage('3');" style="width:246px;height:193px;left:1092px;top:801px;z-index:6;position:absolute;background:rgb(56, 118, 29);background-size:contain;"></div>
<script>
var ids = [],
previousIndex = "-1";
//Construct an array of Gadget IDs and maintain a reference to the Placeholder that they are in.
ids.push({
"id": "video_0W",         //Partial Gadget ID.
"index": "2"             
});//data-index of the Placeholder that the Gadget is in.
//Show a particular page of the Presentation.
function showPage(index) {
var $page = $("div[data-index='" + index + "']");
//Hide all pages.
$(".page").each(function() {
$(this).hide();
});
//Show the page we want.
if ($page != null) {
$page.show();
setIdleTimer(index);
}
//Pause all Gadgets on the previous page.
if (previousIndex != "-1") {
pause(previousIndex);
}
//Play all Gadgets on the current page.
play(index);
previousIndex = index;
}
//Play all Gadgets on a particular page.
function play(index) {
 for (var i = 0; i < ids.length; i++) {
if (ids[i].index == index) {
 playCmd(ids[i].id);
}
 }
}
//Pause all Gadgets on a particular page.
function pause(index) {
 for (var i = 0; i < ids.length; i++) {
if (ids[i].index == index) {
 pauseCmd(ids[i].id);
}
 }
}
//Add an event handler for when a Gadget reports itself as Ready.
$(document).bind("gadgetReady", function(e, id) {
//Uncomment this when first building your Presentation in order to show the Gadget IDs in the console.
//console.log(id);  
var newId = id.substring(9);
//Construct the Gadget's true ID.
for (var i = 0; i < ids.length; i++) {
if (newId == ids[i].id) {
ids[i].id = id;
break;
}
}
});
//Add an event handler for when a Gadget starts playing.
$(document).bind("playCommand", function(e, id) {
var $gadget = $("#" + id);
//Show the Gadget's Placeholder.
$gadget.parent().parent().css("visibility", "visible");
//Show the Gadget. Handle each possible Placeholder transition.
if ($gadget.hasClass("none_hide")) {
$gadget.removeClass("none_hide").addClass("none_show");
}
else if ($gadget.hasClass("fade_hide")) {
$gadget.removeClass("fade_hide").addClass("fade_show");
}
else if ($gadget.hasClass("iris_hide")) {
$gadget.removeClass("iris_hide").addClass("iris_show");
}
else if ($gadget.hasClass("slide-right_hide")) {
$gadget.removeClass("slide-right_hide").addClass("slide-right_show");
}
else if ($gadget.hasClass("slide-left_hide")) {
$gadget.removeClass("slide-left_hide").addClass("slide-left_show");
}
else if ($gadget.hasClass("slide-up_hide")) {
$gadget.removeClass("slide-up_hide").addClass("slide-up_show");
}
else if ($gadget.hasClass("slide-down_hide")) {
$gadget.removeClass("slide-down_hide").addClass("slide-down_show");
}
});
$(document).ready(function() {
//Show home page.
showPage("1");
});
/********** Trigger to reset default page display or the Home Page *****************/
function goHome() {
              showPage("1");
            }
// Set Timer
function setIdleTimer(id) {
              if (id && id != "1") {
                $.idleTimer(180000); //time in milli
                $(document).bind("idle.idleTimer", function(){
                  $.idleTimer('destroy');
                  goHome();
                });
              }
            }
</script>
</body> </html>