<![CDATA[Rate of Dissolving]]> false false true true false .metadata { display: none; } video { display: inline; } ]]> ./lookangtemplateSLS/download.png ./1authorlookangphoto5050.png;./01authorPacoEsquembre2011.png;./01authorFelix_J_Garcia_Clemente.png; DESCRIPTION_EDITOR Desc Page true false _default_ Desc Page false

This serves as a versatile template for creating video-based interactive resources. The provided codes ensure the following:

1. Optimized for seamless playback on iOS and iPad devices in desktop view.

2. Restricts playback to a single video at a time, preventing the simultaneous playing of two videos.

3. Ensures perfect alignment of panels and videos across various screen orientations and sizes.

For instance, consider the following code snippets:

```cssPanel = {"position":"absolute","top":"2vh"} // Controls the position of all videos within this panel container.

onEnded to determine the next action, e.g., t = 41.5

topcss =

css = {"top": topcss}

```

Plottingpanel is sync up with the video via these css

cssPanelAndy = { "display": "flex", "justify-content": "center", "align-items": "center"}

cssPanel = {"position":"absolute","top":offSet}

where

offSet = 1vh // to edit to suit needs

How to use this template:

1. Replace the video with 1920 × 1080 dimensions with your desired content, some fine tuning is needed for other dimensions.

2. Modify the interactive parts of the code to suit your specific requirements.

3. use time t to control the frames of video to show, for example, start t=0, then later t =1 etc to move the storyboard of video, use 0.5 to add interactive elements

4. do not change the order of the video panels below, and the interactive panel on top as the interactive panel needs to be above the video layer to be interactable.

Credits:

Video by Kim.

]]> 1 1 false VARIABLE_EDITOR Var Table true false VARIABLE_EDITOR layout true false VARIABLE_EDITOR video true false VARIABLE_EDITOR panel true false VARIABLE_EDITOR interactive parts true false CODE_EDITOR video true false CODE_EDITOR css true false LIBRARY_EDITOR fullscreen true false LIBRARY_EDITOR changeOrientation true false LIBRARY_EDITOR speech true false { // console.log(voice.name, voice.lang) //}) //debug // Queue this utterance. window.speechSynthesis.speak(msg); } ]]> LIBRARY_EDITOR videofunction true false { if (video.id !== videoId) { // console.log (video.id) // video41 video.pause(); // var temp = video.id // _view[temp].pause(); } }); // Play selected video const selectedVideo = document.getElementById(videoId); console.log(selectedVideo); selectedVideo.play().catch(function(err) { // Probably iOS if (!isRecursed) { EJSS_INTERFACE.BoxPanel.showOkDialog("Click 'OK' to continue", function(){ playSelectedVideo(videoId,true); }); } }); // _view[videoId].play(); } ]]> LIBRARY_EDITOR setPlaysInlineForAllVideos true false { video.setAttribute("playsinline", true); }); } ]]> HTML_VIEW_EDITOR HtmlView Page true false 0 0 0 800 600 true true Elements.Panel true Elements.Panel Elements.Audio Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface Elements.VideoInterface true Elements.Panel true Elements.PlottingPanel Elements.Image2D Elements.Image2D Elements.Image2D Elements.Image2D Elements.Shape2D Elements.Shape2D Elements.Shape2D false Elements.Group2D Elements.Shape2D Elements.Shape2D Elements.Shape2D Elements.Shape2D Elements.Shape2D Elements.Shape2D Elements.Shape2D Elements.Image2D Elements.Image2D Elements.Image2D true Elements.Panel Elements.CheckBox true Elements.Panel Elements.ParsedField Elements.Button Elements.TwoStateButton Elements.Button Elements.Button Elements.Button Elements.Label