Store Page
Nonlinear System Tools
All Discussions Screenshots Artwork Broadcasts Videos News Guides Reviews

Nonlinear System Tools

Store Page
Nonlinear System Tools > Guides > neelix64's Guides
Not enough ratings
Adding Images, Audio and Video
By neelix64
A guide on how to add images, audio and video to your stories.
   
Award
Favorite
Favorited
Unfavorite
Created by
neelix64
Offline
Category: Gameplay Basics
Languages: English
Posted
Updated
11 Dec, 2021 @ 7:24am
11 Dec, 2021 @ 7:47am
24 Unique Visitors
2 Current Favorites
Guide Index
Overview
Intro 
Images 
Audio 
Video 
Using imported resources 
Comments
Intro
There are two methods of using media files in your stories:

1. You can directly link them from a place on the internet, given that you have permission to use them. Linking them from the internet will keep your story files very small but will require a working internet connection from the reader.

2. Import them as a resource inside the story. Importing them as a resource will bump the size of your story file significantly, but the waiting to load will happen only when loading the file the first time, not while reading. Also, the reader will not be required to have a working internet connection.

The official recommended way of doing things is 1. Use 2 only when absolutely necessary.
Images
To insert images wherever inside your story, use the HTML <img /> tag. For example, you can write inside a state situation:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non augue quis turpis sagittis ultricies non eget est. Mauris vel ligula a felis consequat condimentum. Vestibulum fringilla vulputate viverra. Proin tristique augue vel viverra aliquam. Nulla ultrices mollis aliquet. Quisque lobortis, enim porta ultrices dignissim, nulla felis rhoncus leo, at lobortis sapien ipsum in mi. In augue orci, eleifend ut metus nec, imperdiet consectetur erat. Suspendisse dignissim sapien sit amet purus scelerisque tristique.

<img src="https://images.pexels.com/photos/8780369/pexels-photo-8780369.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" width="100%"/>

Etiam at sagittis nisl. Praesent at libero pellentesque, ultricies nunc sed, cursus dui. Nam quis suscipit mauris, ac placerat arcu. Integer luctus, elit rhoncus molestie efficitur, lectus ex viverra tellus, vulputate hendrerit augue felis a ex. Morbi finibus arcu eget tellus fringilla, in porta elit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nunc nisi, lacinia ut sollicitudin nec, finibus at tellus. Ut interdum purus mauris, vitae porta ante rhoncus ac. Aenean eget est ac purus hendrerit gravida. In ultrices ante non quam porttitor, id gravida dolor suscipit. Curabitur congue aliquet nisl, quis porta dui gravida id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio ac ante pretium sollicitudin commodo sit amet justo.

This will show as:

Audio
You can integrate audio using the HTML <audio> tag inside a state's situation like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non augue quis turpis sagittis ultricies non eget est. Mauris vel ligula a felis consequat condimentum. Vestibulum fringilla vulputate viverra. Proin tristique augue vel viverra aliquam. Nulla ultrices mollis aliquet. Quisque lobortis, enim porta ultrices dignissim, nulla felis rhoncus leo, at lobortis sapien ipsum in mi. In augue orci, eleifend ut metus nec, imperdiet consectetur erat. Suspendisse dignissim sapien sit amet purus scelerisque tristique. <audio controls> <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg"> </audio> Etiam at sagittis nisl. Praesent at libero pellentesque, ultricies nunc sed, cursus dui. Nam quis suscipit mauris, ac placerat arcu. Integer luctus, elit rhoncus molestie efficitur, lectus ex viverra tellus, vulputate hendrerit augue felis a ex. Morbi finibus arcu eget tellus fringilla, in porta elit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nunc nisi, lacinia ut sollicitudin nec, finibus at tellus. Ut interdum purus mauris, vitae porta ante rhoncus ac. Aenean eget est ac purus hendrerit gravida. In ultrices ante non quam porttitor, id gravida dolor suscipit. Curabitur congue aliquet nisl, quis porta dui gravida id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio ac ante pretium sollicitudin commodo sit amet justo.

This will show up as:


To hide the controls and make it autoplay when the state is activated:

<audio autoplay>
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>
Video
You can integrate video using the HTML <video> tag inside a state's situation like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non augue quis turpis sagittis ultricies non eget est. Mauris vel ligula a felis consequat condimentum. Vestibulum fringilla vulputate viverra. Proin tristique augue vel viverra aliquam. Nulla ultrices mollis aliquet. Quisque lobortis, enim porta ultrices dignissim, nulla felis rhoncus leo, at lobortis sapien ipsum in mi. In augue orci, eleifend ut metus nec, imperdiet consectetur erat. Suspendisse dignissim sapien sit amet purus scelerisque tristique.

<video controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

Etiam at sagittis nisl. Praesent at libero pellentesque, ultricies nunc sed, cursus dui. Nam quis suscipit mauris, ac placerat arcu. Integer luctus, elit rhoncus molestie efficitur, lectus ex viverra tellus, vulputate hendrerit augue felis a ex. Morbi finibus arcu eget tellus fringilla, in porta elit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nunc nisi, lacinia ut sollicitudin nec, finibus at tellus. Ut interdum purus mauris, vitae porta ante rhoncus ac. Aenean eget est ac purus hendrerit gravida. In ultrices ante non quam porttitor, id gravida dolor suscipit. Curabitur congue aliquet nisl, quis porta dui gravida id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio ac ante pretium sollicitudin commodo sit amet justo.

The result:


Videos from YouTube

This is also possible using the embed codes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non augue quis turpis sagittis ultricies non eget est. Mauris vel ligula a felis consequat condimentum. Vestibulum fringilla vulputate viverra. Proin tristique augue vel viverra aliquam. Nulla ultrices mollis aliquet. Quisque lobortis, enim porta ultrices dignissim, nulla felis rhoncus leo, at lobortis sapien ipsum in mi. In augue orci, eleifend ut metus nec, imperdiet consectetur erat. Suspendisse dignissim sapien sit amet purus scelerisque tristique.

<iframe width="100%" height="300px" src="https://www.youtube.com/embed/LXb3EKWsInQ" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

Etiam at sagittis nisl. Praesent at libero pellentesque, ultricies nunc sed, cursus dui. Nam quis suscipit mauris, ac placerat arcu. Integer luctus, elit rhoncus molestie efficitur, lectus ex viverra tellus, vulputate hendrerit augue felis a ex. Morbi finibus arcu eget tellus fringilla, in porta elit tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nunc nisi, lacinia ut sollicitudin nec, finibus at tellus. Ut interdum purus mauris, vitae porta ante rhoncus ac. Aenean eget est ac purus hendrerit gravida. In ultrices ante non quam porttitor, id gravida dolor suscipit. Curabitur congue aliquet nisl, quis porta dui gravida id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet odio ac ante pretium sollicitudin commodo sit amet justo.


Using imported resources
Embedding imported resources is exactly the same as with online resources, except that instead of specifying an online resource with a link, you specify a local imported resource by name.

For example, for images you would write <img src="{resource=NameOfTheResource}"/>. You can read more about importing resources in the official docs: https://www.najjak.com/nst/docs/#/?id=xf1b2-content-browser