Video questions/problems

**olledahl** · 03 February 2019, 09:13 AM

Hi out there,

I have a few questions/problems with video in Xara Designer Pro X.

1. Problem: I made a page and inserted a video. Then I decided to remove the video, saved the page under a new name - but still the video is transferred to the server. How do I get rid of the 40 MB video file?

2. I want to have a video on a start page, like the one at (https://www.plasticsoupfoundation.org/). It should be visible in both browser and cell phone. How do I do?

3. How do I get the video to autoplay? I chose autoplay when I insert the video, but it doesn't in the preview browser or Firefox. Sometimes, when I resize the screen to show the mobile version it starts, sometimes not.

4. I want the video to replay. How do I do?

I have searched via Google, but maybe my skills in English are not good enougt to find what I am looking for.

Have a nice day!

/Olle in Sweden with -21C and snow.

**Chris M** · 03 February 2019, 12:06 PM

1. When you import a file into Xara (your video) it is saved in a folder under the name of the .xar/.web. When you delete the file from Xara it remains in the folder, you need to delete it manually from the folder.

2. May not be the best way, but I would make a placeholder set to 'stretch full width', upload the video separately and add the code that points to the video in the 'Web Properties' > 'Placeholder' > 'HTML code (body)'

3, 4. The code to do the above and autoplay and loop can be found at W3schools, or someone here with confident coding ability (not me) may offer an appropriate solution.

/Chris in Brisbane with 32C and melting like a chocolate teapot

**Egg Bramhill** · 03 February 2019, 05:38 PM

Siran posted how to do this a couple of years ago but I can't find that thread at present. perhaps if he see's this thread he might give us a link

**olledahl** · 03 February 2019, 06:28 PM

Thanks Egg!

I have searched for Siran's posts and may have found what I am looking for. Now I am holding my thumbs hoping that I will find an answer to my problems/questions.

Otherwise I will try to contact Siran to get help.

/Olle

**cmpan1** · 03 February 2019, 11:19 PM

Siran gave me this code a long time ago because I too wanted a video to play on the home page continuously... and also to 'hide' the controls.

http://specialtydesserts.com/

--------------------------------------------------------------------------------------------------------------------------------------------------------------

<video class="xar_meplayer" src="index_htm_files/website header video converted.mp4" controls autoplay width = "100%" height="100%"/ loop="true">

<style>div.mejs-controls{visibility:hidden !important;}</style>

--------------------------------------------------------------------------------------------------------------------------------------------------------------

also: Chrome has this thing where it will stop autoplay videos for some security reasons... I forgot how I turned it off in Chrome... but if needed,
a Google search will surely give it to you...

Cliff

**siran** · 04 February 2019, 08:14 AM

Unfortunately my version of Xara uses a quite old version of the media element player. This didn't allow stretching.
So what I did in V12 is:
Dragged an MP4 video to an empty website project.
Clicked 'Autostart'. (That ended in an incomplete placeholder.)
Saved the project somewhere. (Xara created a support folder along with it.)
Downloaded the files:
https://raw.githubusercontent.com/mediaelement/mediaelement/master/build/mediaelement-and-player.min.js
https://raw.githubusercontent.com/mediaelement/mediaelement/master/build/mediaelementplayer.min.css
Copied the files to the support folder.
Edited the placeholder code:
- Changed class to xar_meplayer_edit so that Xara doesn't initialize the player on startup and leave it to us so that we can add our own options.
- Removed the controls attribute.
- Added loop and muted attributes. (Muted is reuired sometimes for autostart because modern browsers might not autostart videos with sound.)
- Added some extra code and CSS:

Code:

<style>div.mejs__controls,div.mejs__layers{visibility:hidden !important;}</style>
<script>$(function(){$(".xar_meplayer_edit").mediaelementplayer({clickToPlayPause:false,stretching:"fill"});});</script>

Changed placeholder to stretch to full width (Scale origin centre)
Saved changes. (Somewhen the placeholder changed to a black rectangle...)
Exported to HTML to somewhere and tested.

The result played fine in FireFox, Opera and Chrome. In Vivaldi it only autoplayed after I hit F5. In IE9 it didn't play correctly, only a very small video played and also the sound was played. The following note was taken from https://github.com/mediaelement/mediaelement
In general, MediaElement.js supports IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ and Android 4.0+.
Mobile devices you would have to test yourself if the result for the desktop browsers is accaptable anyway.