Differences

This shows you the differences between two versions of the page.

--- working_with_video [2022/12/02 10:46] – removed - external edit (Unknown date) 127.0.0.1
+++ working_with_video [2023/09/26 08:09] (current) – [Video-integral Page Types] jsmith
@@ Line 1: / Line 1: @@
+====== Working with video ======
+There are multiple ways to include video media in Xerte projects.  It is possible to upload video to the media folder of a Xerte project, but due to the size of video file formats it is more likely that video will be embedded and streamed for viewing.
+===== Video on any page =====
+Video can be added to any page type, where you can access the text editor toolbar.
+{{:toolbar_xerte_video.png|Xerte text editor toolbar.}}
+==== Source ====
+Many video streaming platforms provide HTML embed code that can be copied and then pasted into a different web page.  The embed code usually creates an [[glossary|iframe]] to display the video player that is stored on the external site. This can be done in Xerte, by clicking the Source button.  This toggles the page to HTML view.  Once the embed code is pasted in, the Source button can be clicked again to toggle back to the page display view, revealing the video player.
+==== Embed media from external sites ====
+The media icon can be used to add an external video link, which will then display, in page, in a video player.  This recognises media from a range of supported sites, such as YouTube, Vimeo and others.
+{{:embed_media.png|Embed media content pop up.}}
+=== Embed Media Content - Properties ===
+| Title | Add a name for the video.  This is required for accessibility. |
+| URL | Add the link to the video.  Usually this is the URL copied from the web browser where you have accessed the video. Some video streaming services also provide unique 'sharing' links (such as YouTube).   Both types should work. |
+| Resize Type | No Resize will use the dimensions set by the streaming service. Responsive size lets you select maximum and minimum dimensions (for width and height). Specific Resize lets you specify custom dimensions.  For example, this could be useful if you have a video recorded in portrait view from a smartphone. |
+| Alignment | Can be set to left, center, right, or as the default (none). |
+==== Embed in an iframe ====
+The globe icon allows you to create an iframe for your video using the embeddable version of the URL link.  You can paste a link to the video and Xerte will create the iframe to contain it.  However, the link you need to use must be the one that is provided in the HTML embed code (from the video streaming platform), and if you have that it is possibly quicker to use the Source option above.
+**Note: **A problem with adding video by these 3 methods is that they do not appear as responsive videos. That is, they do not resize according to the screen size they are being viewed on.
+===== Video-integral Page Types =====
+There are several page types designed around the use of video media.  Most of these pages are very flexible in accepting multiple ways of adding the video(s) to be streamed. However, there are some inconsistencies (which are being removed with every new version of Xerte) which are outlined in the table below.  If you rely on your Xerte project being mobile-friendly it is worth reviewing the way you add video, to ensure you have chosen a responsive option.  Responsive video embeds resize according to the screen size they are being viewed on.
+^ Page Type ^ Adding video via the URL box ^ Responsive ^
+| Media | Embed code - Yes\\ Embed link - Yes\\ Browser link - Yes\\ Share link - Yes  | Yes |
+| Synched video | Embed code - Yes\\ Embed link - Yes\\ Browser link - Yes\\ Share link - Yes | No |
+| Timeline | Embed code - Yes\\ Embed link - Yes\\ Browser link - Yes\\ Share link - Yes | FIXME Display problems |
+| Video | Embed code - Yes\\ Embed link - Yes\\ Browser link - Yes\\ Share link - Yes | Yes |
+| YouTube Video | Embed code - Yes\\ Embed link - No\\ Browser link - Yes\\ Share link - Yes | No |
+| Interactive Video | Embed code - Yes\\ Embed link - Yes\\ Browser link - Yes\\ Share link - Yes | Yes |
+| Embed Content | Embed code - Yes\\ Embed link - No\\ Browser link - No\\ Share link - No | No |
+{{tag>pagetype all_pages}}