Stop video playing if modal closed

psweb · February 18, 2020, 1:29pm

I have a modal with a video inside, it has a poster image and does not play on auto, when the user clicks play it is muted, the user needs to unmute it rather.
So all good thats all working great, however if the user plays the video and they unmute it etc, if they close the modal while the video is playing the video does not pause.

I have tried the dmx-on:hide-bs-modal and the dmx-on:hidden-bs-modal one at a time as well as with both together. I have placed this on the modal itself.

<div class="modal fade" id="page_modal_activities" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="page_modal_activities.videoActDetail.pause()" dmx-on:hidden-bs-modal="page_modal_activities.videoActDetail.pause()">

Is this how I am meant to use it?

Teodor · February 18, 2020, 1:36pm

Hello Paul,
Are there any errors/warnings in the console?

psweb · February 18, 2020, 1:40pm

I have a ton of warnings in the console but they were all there before I even added the video

These 106 all say the same thing over and over again

I dont know if you ever managed to get to africacollectionn.com with that IP i gave you of my server but you could see it there

Teodor · February 18, 2020, 1:41pm

I’ll check the pause event locally.

psweb · February 18, 2020, 1:41pm

Thanks Teo

brad · May 1, 2020, 6:38pm

Was there any solution for this, @psweb? I have the same issue. Here is the link …

https://koparadmin.ca/

psweb · May 1, 2020, 7:49pm

To be honest @brad, I never found a solution to the issue and it still exists on that site, however luckily there are so few people that actually play the videos that I kind of just left it assuming at some point one of the updates would fix it.
Haha, very lazy solution, I know, but just had a million other things I was juggling at that time and pretty much forgot about the problem.
If you do find a fix, please be sure to also let me know.

brad · May 1, 2020, 9:03pm

Yeah luckily I only have a 30 second video. I don’t understand why it won’t pause when the modal is closed. I used. the same method you did and no luck. Maybe it’s a bug?

psweb · May 1, 2020, 9:06pm

I am assuming it must be a bug too, maybe @Teodor could have a little test with stopping a video playing on modal close regardless of if the modal is closed with a proper close button or X button or just clicking in the opaque area to close it.

patrick · May 1, 2020, 9:37pm

I tested with a simple modal and a video player in it and it worked all just fine, it pauses on hide and starts playing again on shown.

	<button id="btn1" class="btn" data-toggle="modal" data-target="#modal1">Show</button>
	<div class="modal show" id="modal1" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="video1.pause()" dmx-on:shown-bs-modal="video1.play()">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Modal title</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<video is="dmx-video" id="video1" width="100%" preload="metadata" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>

psweb · May 1, 2020, 9:43pm

Going to test it out on mine but the one difference between your code and mine is that yours does not seem to include the modal ID, while mine does, so just going to check what the picker chooses by default and then try change the target to only the video ID.

Will report back what happens, thanks for testing this Patrick.

Results
Using the data bindings picker when i created the project initially produced this

<div class="modal fade" id="page_modal_activities" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="page_modal_activities.videoActDetail.pause()" dmx-on:hidden-bs-modal="page_modal_activities.videoActDetail.pause()">

While using it now on the latest Wappler version produced this

<div class="modal fade" id="page_modal_activities" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="videoActDetail.pause()" dmx-on:hidden-bs-modal="videoActDetail.pause()">

So although it altered, unfortunately mine still does not seem to work correctly though, just like Brads, it does not pause on close, going to fiddle a little.
If you get a moment Patrick maybe could you check the home page of https://www.africacollection.com/ and just a little way down you will find 6 blocks, one called Go Big Game Fishing… which is the one i am testing with.

brad · May 1, 2020, 9:56pm

Oddly enough I just tried it again and it worked. Must have been some of that Patrick voodoo magic or something.

psweb · May 1, 2020, 10:06pm

Well I just got it working, so it seems the data bindings picker does not like the way my video is positioned in a conditional region, so manually adding the ID of the conditional region gets this working as expected.
like this.

<div class="modal fade" id="page_modal_activities" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="condIfHasVideoAct.videoActDetail.pause()" dmx-on:hidden-bs-modal="condIfHasVideoAct.videoActDetail.pause()">

Here is my entire modal code if it helps track down why the data bindings picker does not like what I did.

<div is="dmx-if" dmx-bind:condition="scViewActivities.data.query_all_act_viewer.hasItems() || scViewItinerariesDetail.data.query_itinerary_inner_itinerary[0].itin_inner_itin_id">
	<div class="modal fade" id="page_modal_activities" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-on:hide-bs-modal="condIfHasVideoAct.videoActDetail.pause()" dmx-on:hidden-bs-modal="condIfHasVideoAct.videoActDetail.pause()">
		<div class="modal-dialog modal-xl w-75" role="document">
			<div class="modal-content ac-bg-colourE">

				<div class="modal-body">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>

					<div is="dmx-swiper" id="swiper_activities_detail" dmx-bind:slides="scViewActivitiesDetail.data.queryActSlides" autoplay navigation effect="fade">
						<div class="swiper-slide">
							<img dmx-bind:alt="act_inner_ss_image_url.replace('/african-and-indian-ocean-holiday-images/activity-images/','').replace('.jpg','').replace('-',' ')" dmx-lazyload-dynamic="" dmx-bind:data-src=""
								dmx-bind:data-srcset="{{act_inner_ss_image_url.replace('.jpg','-tiny-display.jpg')}} 363w,{{act_inner_ss_image_url.replace('.jpg','-medium-display.jpg')}} 564w,{{act_inner_ss_image_url.replace('.jpg','-small-display.jpg')}} 696w,{{act_inner_ss_image_url.replace('.jpg','-huge-display.jpg')}} 864w"
								class="img-fluid">
						</div>
					</div>

					<p class="h4 ac-colourA ac-fontB mt-3">{{scViewActivitiesDetail.data.queryActDetail.act_inner_header}}</p>
					<p class="ac-colourD ac-fontB ac-font-size-120 text-justify" dmx-html="scViewActivitiesDetail.data.queryActDetail.act_inner_sub_header"></p>
					<p class="text-justify ac-colourD ac-fontC4w cms-added-styles-act-wording" dmx-html="scViewActivitiesDetail.data.queryActDetail.act_inner_wording"></p>
					<p class="h3 ac-colourE ac-fontB mb-1 mt-4" dmx-show="scViewActivitiesDetail.data.queryActDetail.act_inner_review">WHAT OUR CLIENTS SAY...</p>
					<p class="text-justify ac-colourD cms-added-styles-act-review ac-fontA ac-font-size-120" dmx-class:mb-0="scViewActivitiesDetail.data.queryActDetail.act_inner_review_credit"
						dmx-class:mb-3="!scViewActivitiesDetail.data.queryActDetail.act_inner_review_credit" dmx-html="scViewActivitiesDetail.data.queryActDetail.act_inner_review"></p>
					<p class="text-right ac-colourE ac-fontC7w ac-fontC ac-font-size-110 mb-3" dmx-html="scViewActivitiesDetail.data.queryActDetail.act_inner_review_credit"></p>
				</div>
				<div is="dmx-if" id="condIfHasVideoAct" dmx-bind:condition="scViewActivitiesDetail.data.queryActDetail.act_inner_video_url">
					<div class="modal-footer">
						<div class="embed-responsive embed-responsive-16by9">
							<video is="dmx-video" id="videoActDetail" autopause controls class="embed-responsive-item" dmx-bind:src="scViewActivitiesDetail.data.queryActDetail.act_inner_video_url" muted
								poster="/african-and-indian-ocean-holiday-images/video-poster/video-player-poster-for-africa-collection.jpg"></video>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>