Media player JS extensions

Examples of media player JS handling

Do not forget to connect the extension:

CJSCore::Init(['player']);

Creating and initializing the player

The most important thing here: is to pass mime-type for each file. This example shows player selecting through all listed files and playing the first that is available. That's why the list must contain the same video with different extensions.

BX.ready(function()
{
    var player = new BX.Fileman.Player('player_id', {
        sources: [
            {
                src: 'https://dev.bitrix24.com/download/files/video/learning/hermitage.mp4',
                type: 'video/mp4'
            }
        ]
    });
    var playerNode = player.createElement();
    BX('player_node').appendChild(playerNode);
    player.init();
});

Player parameter description

Parameter	Type	Description
sources	array	Array with files for playback
autostart	bool	Enabling automatic launch
hasFlash	bool	Set as true, when *.flv file playback is required. In this case, player uploads player .swf file.
playbackRate	float	From 0 to 3. Playback speed (not always available).
volume	float	From 0 to 3. Sound volume
startTime	int	Time in seconds when to start playback
onInit	function	Called directly after initializing the player
lazyload	bool	When true - player will initialize only when located at the user screen.
skin	string	Skin class name. CSS-file must be pre-loaded manually.
width	int	Player width
height	int	Player height
isAudio	bool	Set as true, when player is needed for audio playback.

When created, manager can be used to get player object

var player = BX.Fileman.PlayerManager.getPlayerById('player_id');

Some useful methods

Method	Description
`player.createElement();`	Creates html-node and returns it.
`player.isPlaying();`	Returns true, when player playbacks something.
`player.pause();`	Pauses the playback.
`player.isEnded();`	Returns true, when file playback is fully finished.
`player.isReady();`	Returns true, when player is fully initialized.
`player.play();`	Launches the playback.
`player.setSource({ src: 'path', type: 'mime-type' });`	Sets playback source
`player.getSource();`	Returns current source
`player.init();`	Initializes the player.
`player.mute(status);`	Enables / disables sound

Example of creating and initializing audio player

BX.ready(function()
{   
	var audioPlayer = new BX.Fileman.Player('audio_player_id', {
        isAudio: true,
        sources: [
            {
                src: '/upload/SampleAudio_0.7mb.mp3',
                type: 'audio/mp3'
            }
        ],
        onInit: function(player)
        {
            // the following three strings are needed to hide the fullscreen toggle button
        	player.vjsPlayer.controlBar.removeChild('timeDivider');
            player.vjsPlayer.controlBar.removeChild('durationDisplay');
            player.vjsPlayer.controlBar.removeChild('fullscreenToggle');
            // this hides the large field button
            player.vjsPlayer.hasStarted(true);
        }
    });
    var audioPlayerNode = audioPlayer.createElement();
    BX('audio_player_node').appendChild(audioPlayerNode);
    audioPlayer.init();
});

Bitrix Framework

Examples of media player JS handling

Creating and initializing the player

Player parameter description

Some useful methods

Example of creating and initializing audio player