Hello to every one.
Please, is there way to put some video on top frame or somewhere else, instead of still image, or slide show ?
I hope this is possible in XWD.
p.s. I hace updated to XWD Premium 18 ver.
Thank you !
Printable View
Hello to every one.
Please, is there way to put some video on top frame or somewhere else, instead of still image, or slide show ?
I hope this is possible in XWD.
p.s. I hace updated to XWD Premium 18 ver.
Thank you !
Hi Dencuga, try the folowing in a placeholder Body:
You need to change the video source to one on your server.Quote:
<video width="800" height="600" controls>
<source src="https://parkeston.com/videos/2015_eGames_Intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Great !!! Thats' it !
Thank you ! :D
If you need more help here Initiostar (Gary's) your man. He does great things with videos on websites.
This works fine, but is there possibility for autoplay ?
And initially, if commands (play button and arrows) can be hide ?
Thanks.
You can add autoplay to the video tag, but if there is an audio track most browsers will ignore the command. Where you want to autoplay here is an example video tag:Quote:
Originally Posted by Dencuga
<video id="myvideo"width="100%" height="100%" controls autoplay muted playsinline loop disablepictureinpicture controlsList="nodownload" >
<source src="https://initiostar.co.uk/demo/Waterfall.mp4" type="video/mp4">
</video>
Where you use autoplay muted, you need to add playsinline for iOS on mobile. You may too want to disable picture-in-picture on a mobile variant and where the video has a commercial value you may also want to prevent download.
You can hide the controls by omitting the "controls" from the video tag; this is OK for background videos, but is generally not good practice otherwise.
Here is some futher explanation and a demo: https://initiostar.co.uk/demo/simpleVideo/ & Attachment 130435
There's a lot you can do with video and here are two more examples: one demostrates background videos, intros and banners, the other shows three different ways for managing video libaries.
https://initiostar.co.uk/demo/Video/fullvid.htm Here the code is placed in HTML page(head)
https://initiostar.co.uk/demo/EmbedVideo/ Here we have used a custom designed video player
Plenty of ideas here to play with.
Gary
GREAT !!!
Thank you :)
Gary, this is kind of golden-video widgets ... But I can not understand, why Xara don't have it in it's own widgets set ?
Is there any reason ?
Dencuga, most of Xara's widgets were built a very long time ago; I am not aware of any significant efforts to update any of them and certainly now, IMO, there are better custom alternatives. Xara does have its own video media player (and video widget), but it is no longer fit for purpose.Quote:
Originally Posted by Dencuga
The more elaborate video player examples I provided were based on collaborative design ideas (with significant help from TGers Acorn and Siran). In reality, there is a small amount of code in some of them, but it is relatively easy to explain should you want to use one of them.
The same applies to sliders, galleries and photo widgets - all of which can be better implemented with custome design and small amounts of code e.g. Nivo sliders https://initiostar.co.uk/demo/zNivo/
When I look at Xara's corporate marketing direction, I do not have any expectations that investment in website widgets is a priorty, but there is plenty of creativity here at TG to compensate for that scenario.
Gary
Ok I understand, but many of those widgets that you guys are making, are lost in pages and pages here in Talk Graphics, for past years ...
Maybe there is some idea to collect them in one place or forum just for that kind of widgets ...
This sliders, I can't see the code for placeholder ?
Thank you man for your kindness.
Denis
Denis,Quote:
Originally Posted by Dencuga
From my expeirence the value that TG provides is that it evolves and ideas develop. The original slider work had names such as Ultimate Supersite Slider and Supersite Slider; Egg produced a video too: https://www.talkgraphics.com/showthr...rs-within-Xara.
Here are the sliders embedded into a holding website: https://initiostar.co.uk/demo/zNivo/
In summary (in my case) each slider is a website within a website called using a standard iframe. The holding website is exported as a standard website whereas the slider website, is a transitional website with whatever transition you choose. The key to this working without any hassle, is to export your slider website to the SAME diectory as your main website. A transitional website creates ONLY ONE htm file - when you create the first page in your slider website, you must give it a unique filename (not index) - and ignore the Xara warning. When you export the slider website to the same directory as your main website you will see the fielname reside alongside the main website page filenames.
Here are some slider websites with different transitions and ideas - the designer can introduce whatever navigation they choose into the slider website.
Attachment 130449 Attachment 130450 Attachment 130451 Attachment 130452
To include a slider website in your main website requires a proportionally sized placeholder with an iframe to locate the filename:
<iframe src="your-exported-file-name.htm" name="slide-name-reference" height="100%" width="100%" style="border:none;"></iframe>
The code that is placed in each slider website depends on whether you want to autoplay the slider, or have the visitor control start/stop toggle autoplay. The first section of code is not required for v18.0 or Pro + (it was necessary to overcome a bug in earlier versions).
Equally and optionally, you can disable the keyboard arrow keys or leave them in operation. Personally, I disable them. There is another version of the code that allows the designer to have different time intervals between the slides (though I don't use it).
The upside to this whole approach is its complete flexibility; unlike most sliders text-stays-as text. You can choose to set the slider website page and pasteboard colours to be the same as your main website which can give a seamless integration effect. From v18.0 and Pro+ swipe is supported and ALL these sliders work with it, which is particularly useful for touch-based devices.Code:<!--this code is placed in the Website HTML code (head)-->
<!--do not show display navigation in v17 -->
<style>#xr_palrt,#xr_pnava{display:none !important}</style>
<script>
// this code placed in the Website HTML code (body)
// disable keyboard navigation in v17 including the directional arrows (optional)
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
//toggle scroll to automate the slider - the time interval 600ms is variable
curScrollInterval=null;
function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval((function _(){xr_spapp((xr_curp+1)%xr_spapn);return _;})(),6000);}}
</script>
<script>
//this code placed in the Website HTML code (body)
//this one line of code automates the slider - the time interval 400ms is variable
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},4000);
// disable keyboard navigation in v17 including the directional arrows (optional)
(function(){if(typeof(xr_prinit4)=="function"){var o=xr_prinit4;xr_prinit4=function()
{o();if(document.onkeydown==xr_prku)document.onkeydown=xr_d_old_onkeydown;};}})();
</script>
Hopefully, this gets you started with some great sliders :D
Gary
One big THANK YOU Gary !
I have to study this well ;)