Suave, for elegant HTML5 videos (how they should have been). Suave was built to re-engineer the unstructured mess the HTML5 <video> tag presents. Suave cleverly takes all the strain of nested <source> tags and file types away from you allowing you to code an HTML5 video in just one line:
<video data-src="video/mymovie.{mp4, ogv, webm}"></video>Check out a demo of Suave.
To install Suave into your project using Bower, use the GitHub repository hook:
bower install https://github.com/toddmotto/suave.git
Drop your files into your required folders, make sure you're using the file(s) from the dist folder, which is the compiled production-ready code. Ensure you place the script before the closing </body> tag so the DOM tree is populated when the script runs.
<body>
<!-- html content above -->
<script src="dist/suave.js"></script>
</body>Suave really is super-simple:
<video data-src="video/mymovie.{mp4, ogv, webm}"></video>All you need to do is insert the file extensions you need (separated by commas) inside the data-src attribute, and suave will work it's magic for you by dynamically creating the required <source> tags with the relevant src and type attributes.
Project files and folder structure.
├── dist/
│ ├── suave.js
│ └── suave.min.js
├── src/
│ └── suave.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── Gruntfile.js
└── package.json
MIT license