How to structure a large website as I convert it to Xara?

[IanB]

I thought the Island Waterways website would be good test for extending Audio Plugin v3 to accommodate auto-display of information directly related to the songwriter, such as the words, chords, references and any related videos.

I've combined the ideas from the Audio Player with some of the ideas from the Video Player. The key task is to ensure that one has an effective toggle between audio and video and that one does not play over the other.

All the audio and video content is stored on a secure server, only the links are in the Xara design file. The supporting material for each song has a Class Name and each class has its own layer in the design file. There would be just 27 pages to cover all the songs structured in alphabetic groups, each letter with its own page plus a page for 0-9.

It has ultimate flexibility; the links can be a list as in the example, album covers or anything of the designer's choice : Audio Visual Plugin v1

Still very much Work-in-Progress; the code needs some rework, but it seems to work well. It's not an off-the-shelf plugin by any means, but the designer has a library of prebuilt audio and video functions, such as start (load), play and pause for audio and video.

Attachment 129511

Gary

BTW the latest video plugins:

Wow! This is certainly an impressive and user-friendly way of accessing the type of information I have on my site. It's a much more modern approach to that which exists now - but which was first devised 15 or more years ago when my understanding of HTML was limited (much like it is now). I look forward to seeing it develop and seeing if I can update my site more than I originally planned.

IanB

[Initiostar]

Ian,

<audio id="sotiw" src="http://www.waterwaysongs.info/sounds/alice_white.mp3" controls controlsList="nodownload" style="width: 320px;" ></audio>

I'm not sure what the controlsList command does or if it is necessary?

The [ controlsList="nodownload" ] prevents the visitor downloading the song from a Chrome browser (the vertical 3 dots on the right of the player). Where songwriters are happy for their material to be downloaded, you can omit this command.

You are accessing the songs from your hosted 'sounds' directory - this is exactly what we did for the audio player demo to avoid loading any content into the design file. The audio id becomes relevant where you want multiple songs to use the SAME placeholder (as in the demo).

The same principles apply to videos. Create a directory (e.g. 'videos' ) same directory level as 'sounds' and FTP them all into this directory.

Where you want to access a video, create a placeholder proportionally sized to the (h) and (w) of the video. In most cases the start point for HD format is 1920px(w) x 1080px(h), therefore 960px(w) x 540px(h) is a convenient placeholder size to start. You can proportionately resize it thereafter.

You can now use a video tag - something like this:

<video id="vidplayer" width="100%" height="100%" playsinline controls autoplay disablepictureinpicture controlsList="nodownload"; >
<source src="https://domain-name/videos/filename.mp4" type="video/mp4"
</video>

As with the Audio tag, the Video id becomes relevant where you want multiple videos to be loaded into the SAME placeholder. 'autoplay' is optional and in your setup, I'd probably leave it out. 'disablepictureinpicture' prevents the video being displayed in the bottom right of the browser window (which unless you've factored the idea into your design is best disabled). As with the audio tag, 'controlsList="nodownload" prevents the video being downloaded - not required if your songwriters are OK with their material being downloaded.

'playsinline' is required for iOS devices where 'autoplay' is in use for touch-based devices (iPhone iPad). I include it all the time.

Personally, if you have access to the original videos this is the way to go. Where you need to access YouTube etc. they provide the code to embed in a placeholder. You still need to modify the code to add "playsinline" eg https://initiostar.co.uk/demo/Video/utube.htm.

Gary

[IanB]

Hi Gary

Thanks for taking the time to give your comprehensive explanation which has explained things thoroughly and has been very helpful. I will be making use of this info definitely.

Linking to YouTube videos has the advantage of ease of linking but gives those pesky suggestions at the end and, of course, someone might decide to remove their video. I'll probably link taking note of your demo but may download copies (for private use) as well so they are not lost to posterity - I'm aware of YouTube copyright restrictions and don't want to be taken to court for breaking them. Those videos which are not from YouTube and are already on the web-server will be linked following your suggestions.

Changing the whole website will take some time but, thanks to help from this forum, I feel I am at least heading in the right direction.

IanB

[Acorn]

Hi Gary
Thanks for taking the time to give your comprehensive explanation which has explained things thoroughly and has been very helpful. I will be making use of this info definitely.
Linking to YouTube videos has the advantage of ease of linking but gives those pesky suggestions at the end and, of course, someone might decide to remove their video. I'll probably link taking note of your demo but may download copies (for private use) as well so they are not lost to posterity - I'm aware of YouTube copyright restrictions and don't want to be taken to court for breaking them. Those videos which are not from YouTube and are already on the web-server will be linked following your suggestions.
Changing the whole website will take some time but, thanks to help from this forum, I feel I am at least heading in the right direction.
IanB

A few years back including ?rel=0 or &rel=0 stopped these. Now the same only shows videos from the same YouTube Channel. This might be enough for you.

There is a shedload of code to block related videos but I am sure there are better approaches.
The heavy code approach is https://www.maxlaumeister.com/articles/hide-related-videos-in-youtube-embeds/.

Whatever you do not not drop the video onto your design as you end up with massive uploads.
Store as you are doing for the audios.

Acorn