Xara Designer Pro X 17.1.0.60486 - Issue with Video playback

Hi
I'm hoping that somebody can help with an website issue I have with playing MP3 videos on a layer

So I have a website, need to do a Before and After videos to show the improvement made to sound proofing a hall
I have 2 layers, "Before" and "After". I import the videos so they are cached into index_html_files. Then draw a rectangle to the size of the video, and in HTML Placement section I enter

<video class="xar_meplayer" src="index_htm_files/AcousticsBeforeMPS.mp4" controls width = "85%" height="85%"/>

I do the same on the second layer only pointing to the second video file.

On the Mouse Off page, I have two text links which points to Web Properties > Link > Pop-Up Layer and I select the Before layer and another link to the After Layer

If I click on the "Before" link, the video file pops up (it doesn't auto play by choice) I click on Play and video starts.
If I exit out of the video before it finishes (by clicking on the video's upper X) the video stops and closes.

Here's the issue....If I click on the "After" link...the video pops up in the same way. BUT...if I close the video by clicking on the upper X, the video stops, pop-up closes......and the audio keeps on playing in the background! I have to open the video back up, pause it, then I can close it down

If i swap the video over so on the existing links, it does the same thing. One video opens and closes correctly, the other keeps playing on close. If I swap the text links over so the other layer is selected, I get the same issue. So its not down to differences in the videos. I even had the same video in both layers and still get the same issue.

I tried moving the video player into a different part of the website in case it makes a difference but it doesn't.


I tried
<iframe src="https://my-domain.com/media/AcousticsBeforeMPS.mp4"
width=100% height=100%
scrolling=no
frameborder=0
marginheight=0 marginwidth=0>
</iframe>

But that was just a disaster as it wanted to download it to play it!

I don't think I'm trying to do anything difficult but I'm obviously doing something wrong but surely it shouldn't be this difficult to play videos on pop out layers.

Any assistance appreciated and Thanks for your time

Thread moved to Web Design Chat. I'm sure someone will have a suggestion and/or solution soon.

Try deleting the class="xar_meplayer" part.
It may help.

Acorn

Quote:

---

Originally Posted by Acorn

Try deleting the class="xar_meplayer" part.
It may help.

Acorn

---

Hi Acorn

Thanks for the reply

I changed the HTML Placeholder to

<video src="index_htm_files/BeforeMPS.mp4" controls width = "85%" height="85%">

and <video src="index_htm_files/AfterMPS.mp4" controls width = "85%" height="85%">

And now they both keep playing the Audio in the background when the video is closed. Obviously if I pause it first and then close it, there's no audio but I can't expect visitors to do something "alien" like that.

Thanks again for the reply

Quote:

---

Originally Posted by AFreeSpirit67

Hi Acorn

Thanks for the reply
I changed the HTML Placeholder to
<video src="index_htm_files/BeforeMPS.mp4" controls width = "85%" height="85%">
and <video src="index_htm_files/AfterMPS.mp4" controls width = "85%" height="85%">

And now they both keep playing the Audio in the background when the video is closed. Obviously if I pause it first and then close it, there's no audio but I can't expect visitors to do something "alien" like that.
Thanks again for the reply

---

It was worth a try!

Acorn

The issue is you cannot easily override the browser's own controls when videos are deployed on popup layers. You could with a purpose-designed video player, but for a couple of videos that's a lot of hard work.

Here's an idea (borrowed from an Acorn concept) of a page within a placeholder: https://initiostar.co.uk/demo/VideoPopup/

A 'video popup' really - works OK with Chrome & Edge, but I've yet to loose the scroll bars on Firefox.

It may be help?

Gary

Quote:

---

Originally Posted by Initiostar

The issue is you cannot easily override the browser's own controls

---

just want to jump in here and say that is good from [this] user point of view

browser controls are there for a purpose

Yes, and all the browsers controls are still present in the video window- works exactly the same way. Please take a look at the demo link.

just not sure what you meant by 'get round' ;)

poor choice of words maybe HD - you could have a purpose-designed in-built video player, but my preference has always been to use a browser's own controls:D

ok no problem, thanks

Quote:

---

Originally Posted by Initiostar

The issue is you cannot easily override the browser's own controls when videos are deployed on popup layers. You could with a purpose-designed video player, but for a couple of videos that's a lot of hard work.
Here's an idea (borrowed from an Acorn concept) of a page within a placeholder: https://initiostar.co.uk/demo/VideoPopup/
A 'video popup' really - works OK with Chrome & Edge, but I've yet to loose the scroll bars on Firefox.
It may be help? Gary

---

Gary, I was reluctant to advise using the source target approach when the video itself is to be on a pop-up layer, simply because I have not tried it out fully.

In principle, it should work.

Thank you for sharing.
I do like the mix of image and video; I know you realise that the contents can actually be anything: carousel, slideshow, clickable content, ...

Acorn

Hi

Thanks all for the replies

I did look at the Demo of the other player - but it's not opening the video on another layer which is what I'm trying to achieve due to the layout of the web page. I may try putting both videos on one layer and see if that makes a difference.

But I will certainly look at using a different player....it's just annoying that one video always play fine yet the other has the issue mentioned on the video popup demo namely
"The Challenge - where you place multiple videos across multiple popups, closing the popup may not close the video. This only becomes apparent when a video has audio. Unless you have deployed your own video player, the video can only be controlled by the browsers video controls which are not easily over-ridden. A simple page-based Video Popup is one solution. "

Thanks again for the replies

Quote:

---

Originally Posted by AFreeSpirit67

Hi

Thanks all for the replies

I did look at the Demo of the other player - but it's not opening the video on another layer which is what I'm trying to achieve due to the layout of the web page. I may try putting both videos on one layer and see if that makes a difference.

But I will certainly look at using a different player....it's just annoying that one video always play fine yet the other has the issue mentioned on the video popup demo namely
"The Challenge - where you place multiple videos across multiple popups, closing the popup may not close the video. This only becomes apparent when a video has audio. Unless you have deployed your own video player, the video can only be controlled by the browsers video controls which are not easily over-ridden. A simple page-based Video Popup is one solution. "

Thanks again for the replies

---

Here's an idea that may meet the requirement - an embedded subsite much like a video library is placed on a popup: https://initiostar.co.uk/demo/VideoSubSite/

You can have as many videos as you like. Each video has a unique page url and therefore should you wish popup links can be subject-specific to their links, or all links can open the video library (which has its own navigation).

The key to making this work is the return button on the popup; this must do a full page refresh (which this closes the popup and stops the video). The return should go to an anchor which means that what a user was reading is still visible after the page refresh.

I've not perfected the solution, but it looks to have some promise as a workaround for trying unsuccessfully to pause a video WITH AUDIO on a popup when you close that popup. Upside no tricky code involved here!

For reference: the earlier version had a permanent video holder on the target page: https://initiostar.co.uk/demo/VideoPopup/

Thanks for the reply

However I have to say I have no idea what you are telling me! The link is text only, half in latin, and the section I can read flies right over my head! I know there is a hyperlink to the video player in the latin section but it does seem strange to have it buried in latin! I had a look at https://initiostar.co.uk and it doesn't seem to offer anything specifically to do with HTML video players or seems to offer something that can be used to help me with the issue so again I'm confused. What you have shown on the site is what I would like to have on my site . . But I need to know how!
I'm a beginner when it comes to all of this, so so far the only bit I've understood is Acorn's advise on editing the html I had used on my site. Thanks to some of the other replies, I also understand that this is a bit of a known issue although I'm still confused how it works fine for 1 video but not the 2nd one!
I had a look at github for HTML video players and there are what appears to be some good 3rd party alternatives...but again, I can't find any clear instructions that tells me how to actually "install" them and use them on a website. Its like if you're not part of the gang, you're never going to be in the know!

I will keep looking for a 3rd party video player that I can use and works - when I do I'll share it here

Thanks again for the replies

OK - let me try to explain: forget the 'latin' - this is just example text known as 'Lorum Ipsum'. You can have a text link, graphic link, photo link or combination thereof (e.g. button) that forms a link to the popup.

In the example I provided, I used a text link; it could have been a graphic, photo or button. Think of a website within a website; there is a second website on the popup which holds the videos and when the link opens that popup, what you see is the second website.

I have attached both website files. The Embedded Subsite is the main website, the second website has the videos, one per page.

Hopefully you can see how these are constructed - if you want to try this approach, I can try to help you through the process.

I do think integrating a third-party video player for two videos will likely be time consuming and involve coding.

That is a very simple yet effective solution! Thank you!

The two sample files make it easy to follow the logic behind the workings and as you say is a lot easier than trying to implement a 3rd party player.

I'm playing around with sub site part for now . . . Not really sure why but the videos are using are hell bent on playing larger than I've set them to play at but hopefully I can figure it out. The placement is set to the video size and the html place holder is set to 100% yet it plays almost full screen. I've resized the video itself to 360 X 720 (or whatever 6:19 comes out at!) But still plays larger.

Hopefully when I get the host page to match it'll all pull together!

Thank you again for your help with this

Stay Safe

Good news then! Should you get stuck just post an update/question here.

Meantime, I have added some instructions which should better help explain the process: https://initiostar.co.uk/demo/VideoSubSite/

Personally, I would build version one of your website with both videos on the page, get comfortable with how Xara works and then advance - it has taken me 10 years of playing with Xara and lots of help from TGers to arrive at some of these ideas.

I have just tried with an embedded video in Before and a YouTube video in After.

For the Before link, I used popup: close "After" open "Before"
For the After link, I used popup: close "Before" open "After"
I added a close icon/button/text of popup: close "Before" "After"

Clicking and playing any combination stopped the sound of one to allow the other.

I did nothing to the videos other than drop them into their layers.
The approach will work with as many videos in layer and layers that you can be bothered typing in.
Also tried with autoplay and that fitted in nicely too but I had to fiddle with code to get the YT one started.

Acorn

Quote:

---

Originally Posted by AFreeSpirit67

Hi
I'm hoping that somebody can help with an website issue I have with playing MP3 videos on a layer

So I have a website, need to do a Before and After videos to show the improvement made to sound proofing a hall
I have 2 layers, "Before" and "After". I import the videos so they are cached into index_html_files. Then draw a rectangle to the size of the video, and in HTML Placement section I enter

<video class="xar_meplayer" src="index_htm_files

I don't think I'm trying to do anything difficult but I'm obviously doing something wrong but surely it shouldn't be this difficult to play videos on pop out layers.

Any assistance appreciated and Thanks for your time

---

It might be very helpful if you could post your website URL to see how you’re progressing. Many Thanks
-Bill