MOVIES FOR WEBSITE

[Chris M]

Do you have loop=true anywhere in your code?
src="something.mp4" width="320" height="320" loop="true">

[CrankyFranky]

Thank you Chris, that works OK.

[Hushpower]

I have a JWPlayer movie that I have embedded into a webpage (javascript and iframe code provided by JW). When I preview the site "large" page, the video works great. When I shrink the page down to preview the mobile size, the video suddenly disappears as the page jumps to mobile mode.

I have tried reducing the size of the JWPlayer video down to 480x270px, but no joy. It still disappears. I have tried just the script code at the end as well. No joy.

Here's the javascript code:

<div itemscope itemtype="https://schema.org/VideoObject"><meta itemprop="uploadDate" content="Fri May 13 2016 16:29:13 GMT+0800 (Australian Western Standard Time)"/><meta itemprop="name" content="F28 Movie v6.mp4"/><meta itemprop="duration" content="PT10M9.505S" /><meta itemprop="thumbnailUrl" content="https://content.jwplatform.com/thumbs/E3M8nCJm-720.jpg"/><meta itemprop="contentUrl" content="https://content.jwplatform.com/videos/E3M8nCJm-jioqwdFJ.mp4"/><script src="https://cdn.jwplayer.com/players/E3M8nCJm-dPGVsxgy.js"></script></div>

How can I get the movie to still be visible in Mobile mode?

[Hushpower]

Further to my post above, I've just tried dragging a mp4 straight onto my page. The full site page movie runs OK, but the mobile site movie disappears as above.

[Acorn]

Further to my post above, I've just tried dragging a mp4 straight onto my page. The full site page movie runs OK, but the mobile site movie disappears as above.

To demonstrate the issue.

Create a fresh one-page web design and add your Placeholder and code to the page.
Clone it and Preview.
You will only see one of the Placeholders with a working movie.

A Variant deisn is like a one-page design in that all the code is in one file, but hidden,.
If a double show doesn't work in the one-pager, it will never do so in a set with Variants.

Your specific example also duplicates the JavaScript control for the player, which, like the MP4 approach, is only designed to handle one video at a time.

One way I know is to Embed a website Widget inside linking to a separate video page in your design and clone into your Variant instead.

Acorn

[Hushpower]

Thanks Acorn, I didn't quite understand your last sentence, but you gave me an idea; I tried using a "different" (renamed) copy of the movie in the mobile variant only and it worked.

I suppose the only downside is the site now has 2 video files instead of one (well, one and a half), but I can handle that. I'll also try using the JWPlayer for the normal (big) page and the small video file directly from the site for the mobile page.

Cheers, HP

[Hushpower]

I've found that if I duplicate scripts for a facebook button ( a script button, not just a image with a link), it won't display the Mobile page, similar to my first post issue above. I have added a email-generation script, but that is working OK on both variants.

As I am still in my trial period, I can't get access to any of the catalogue (I see a general widget item there but it's not accessible). Is there a way if inserting one's own HTML without "cheating" by inserting a movie then changing the HTML for the widget? I'm thinking that it may be the movie container ("placeholder"?) that is causing the issues with the Mobile page.

I assume there is a way to get say Facebook Like/Share buttons (not seemingly available in the catalogue under the social media section) onto both Main and Mobile pages using HTML?

Thanks for your help.

[Initiostar]

Is there a way if inserting one's own HTML without "cheating" by inserting a movie then changing the HTML for the widget? I'm thinking that it may be the movie container ("placeholder"?) that is causing the issues with the Mobile page.

Attached is a demo I used to test Xara Pro v16 and v17 and it covers the following:

(1) an on-page video, (2) full browser width banner video, (3) fill browser video (4) a custom design intro video that transitions into the chosen background page/pasteboard colour/image.

(1) uses a standard placeholder and a simple script with standard 'controls' such as autoplay, mute etc. (2), (3) and (4) have a script in the HTML code Head for the PAGE on which you want that video to be viewed. You can overlay any content over the video and for (2),(3) & (4) even a video on top of the base video!

None of this requires an embedded video player; using the approach above, when a video is rendered in a browser, it simple uses the controls provided by the chosen browser, Chrome, Firefox, Edge etc. This saves any hassles with any particular embedded video player and gives you, for example, Picture-in-Picture without any effort. I would not even think of using the Xara Player widget! You can change the scripts in the placeholder on the page and in the HTML page head. You can build-in any additional controls you want into the placeholder, Page HTML head or Page HTML body.

All this works very simply for any standard MP4 video. For (1) copy, paste and resize for any variant. For (2), (3) and (4) any video ran from the code in the HTML code head, automatically runs across all variants. In some cases this may not be desirable so you can simply mask part or all of the video with a content overlay.

Now here's the bonus with v16 & v17. You can apply the 'scale-to-fit-width' export option to create an adaptive (not responsive) visual for your site.

You can do a lot with the scripts, but if you do want to get even more sophisticated with a video library app for multiple videos then take a look at this player: https://videojs.com/.

If however, you want a simple video library, then create thumbnails for each video on the MouseOff layer, place your video, or group of videos on popup layer(s) and have the thumbnails link to the target popup layer. You would probably need a script to pause a playing video when starting another.

Hopefully this gives you some ideas.

Gary

[Initiostar]

Attached is a demo I used to test Xara Pro v16 and v17 and it covers the following:

Demo hopefully attached this time!

[Hushpower]

Gday Gary,

I can't open your XAR; WD says it needs to download the Google Monseratt font but then freezes.

Also, how do I insert HEAD code? Placeholders > Web properties have a button for BODY code but I can't find a way of inserting HEAD. Page 25 of the PDF manual describes how to do it but a HEAD insert button is never visible, only BODY.

Cheers, Al