Generating of thisPlayer

Using regular HTML5 media element

Use regular HTML media (<video> or <audio>) element with attribute data-thisplayer to generate thisPlayer in place of regular media element. Also value of attribute data-thisplayer can be options for thisPlayer. See an example below:

<!-- Use data-thisplayer attribute to set options. In case of no options leave the attribute empty. -->
<video width="500" height="320" preload="none" data-thisplayer='{
    "outerId": "first-player",
    "ratio": "7/3",
    "startTime": 20,
    "bigPlayButton": false
}' poster="/your-images/image.png">
    <source src="/your-folder/your-video.mp4" type="video/mp4">
</video>

Using simple JavaScript setup

Generate thisPlayer using simple JavaScript setup with setting container option. See an example below:

HTML

<div id="player-container"></div>

JavaScript

// Use just object selector string
var tp = thisPlayer({
    container: '#player-container', // Using id selector
    resources: '/your-folder/your-video.mp4'
});

// Or use JavaScript Node object
var tp = thisPlayer({
    container: document.getElementById('player-container'), // With JavaScript Node object
    resources: '/your-folder/your-video.mp4'
});

thisPlayer as prototype of JavaScript Node and NodesList objects

thisPlayer is prototype of JavaScript Node and NodesList objects, so you can call thisPlayer as prototype of any HTML object in JavaScript. In this case you do not need to use container option because player will be generated into the HTML object that you're using for generating of thisPlayer. See an example below:

HTML

<!-- Object with id selector -->
<div id="player-container"></div>

<!-- Object with class selector -->
<div class="player-container"></div>

JavaScript

// Via JavaScript Node object
var tp = document.getElementById('player-container').thisPlayer({
    resources: '/your-folder/your-video.mp4'
});

// Via JavaScript NodesList object
var tp = document.querySelector('.player-container').thisPlayer({
    resources: '/your-folder/your-video.mp4'
});

Setup with jQuery

Sure its possible to use thisPlayer with jQuery object. This way is very simple to understand if you're familiar with jQuery. Do not use container option as it is useless. thisPlayer will be generated into HTML object selected by jQuery. See an example below:

HTML

<div id="player-container"></div>

JavaScript

// Setup via jQuery object
var tp = $('#player-container').thisPlayer({ // thisPlayer is fn of jQuery
    resources: '/your-folder/your-video.mp4'
});
// Use jQuery() instead of $() if your lib does not supports short $