Before making trailers fulltime, I made HTML things. One of these things is a special video tag for the speedy hybrid app framework called Ionic.
I was making an app for a company in Winnipeg called Soundmind Health Technologies. In this particular app, I needed to be able to show a list of videos and when they were clicked, smoothly animate and fade into the video and have them start automatically.
So, I thought that this would be the best time to try out one of Angular’s directives, which basically lets you make up your own HTML tags and wrap them with custom javascript and behaviors. Very cool, but can be tricky to get your mind around how it all works.
Anyways, I made a directive that makes links and auto loads videos when you click them. Here’s what it looks like in action:
Here’s a sample of what I used for the list above:
<ionic-video-link video-src="assets/Getting Started.mp4" video-name="getting-started">
<ion-item>
<i class="icon ion-ios-play-outline"></i>
Getting Started
</ion-item>
</ionic-video-link>The directive preserves whatever you have inside the ionic-video-link tag so you can use it for any sort of link! Very handy.
That’s it! The directive takes care of the rest. Check out the GitHub repo and send me any bugs or any questions you may have. 🙂
Cheers!