Views: 219
Last Modified: 07.04.2022

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

MethodDescription
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();
});




Courses developed by Bitrix24