Amstramgram Video Player - Demo

Basic 1

First not so basic example with autoplay, loop, muted, thumbnails and volumeForced options.
The volume of the player is stored in the session storage.
Thus, if you unmute the video, the new volume level will be stored to eventually be recalled when you refresh the page.
But in those conditions, the player shoud not auto start as most of the modern browsers block the autoplay feature if the audio volume is not set to 0.
To prevent this, we use the volumeForced option who kindly tells the player to ignore the stored volume.


HTML
The src, autoplay, muted and loop properties are all set via the video tag attributes.
<video 
	id="vid01" 
	src="https://jefaisdesbetises.net/medias/LesCastorsAutoConstructeurs-jefaisdesbetises.com.mp4" 
	autoplay 
	muted 
	loop>
</video>


JAVASCRIPT
new AmstramgramVideoPlayer(document.querySelector('#vid01'), {
	//Thumbnails source path
	thumbnails: {src: "assets/castorsThumbs.jpg"},
	//Ignore the volume eventually stored in session storage
	volumeForced: true,
	//When the player is ready, the main block "content" of the page 
	//whose opacity was initialy set to 0 is transitioned to 1.
	onInit: function(){document.body.classList.add('ready')}
});

Code

Basic 2

This time, we specify a 5:27 duration (327 seconds) and a poster, use the videoVolumeOrientation option to display an horizontal volume slider, hide the download button, translate the fullscreen labels in czech (why not ?!!) and set the volumeGroup to 1.


HTML
<video id="vid02"></video>


JAVASCRIPT
new AmstramgramVideoPlayer(document.querySelector('#vid02'), {
	//Video source path
	src: "https://jefaisdesbetises.net/medias/France-jefaisdesbetises.com.mp4",
	//Video duration
	duration: 327,
	//Poster source path
	poster: "assets/francePoster.jpg",
	//Set the volume display to horizontal orientation
	videoVolumeOrientation: "horizontal",
	//Next button properties
	next:{
		label: "Un test", 
		disabled: true, 
		hidden: false
	},
	//Download button properties
	download:{
		hidden: true
	},
	//Fullscreen button properties
	fullscreen:{
		label:{
			enter: "Celá obrazovka",
			exit: "Běžné zobrazení"
		}
	},
	//Same volumeGroup as player 3 :
	//Volumes of players 2 and 3 are linked
	volumeGroup: 1
});

Code

Basic 3

For this last basic example, we declare a poster via an attribute added to the video tag. Furthermore, we again use the videoVolumeOrientation option to display an horizontal volume slider and set the volumeGroup to 1, as the previous example.
The video block container has a max-width of 600 pixels.
If you have a large enougth screen, until now, you should have seen the normal UI.
In this particular case, because space avalaible for the time rail is inferior at 600 pixels, the compact UI is used (for further details, have a look at the railMinWidthForNormalUI option).
If you click to play, you may observe how the player height will smoothly grow to accomodate the actual video format.
You should also notice that the total duration displayed changes from 2 minutes (the default value) to 40 seconds as soon as metadata are loaded.
Last but not least, you can check how the volume levels of the players 2 and 3 are linked : they both belong to the same volumeGroup.
If you modify the volume level and refresh the page, this last level will be applied to the players 2 and 3.


HTML
<video id="vid03" poster="assets/paquesPoster.jpg"></video>


JAVASCRIPT
new AmstramgramVideoPlayer(document.querySelector('#vid03'), {
	//Video source path
	src: "https://jefaisdesbetises.net/medias/JoyeusesPaques-jefaisdesbetises.com.mp4",
	//Set the volume display to horizontal orientation
	videoVolumeOrientation: "horizontal",
	//Same volumeGroup as player 2 :
	//Volumes of players 2 and 3 are linked
	volumeGroup: 1
});

Code