solution for `DOMException: The play() request was interrupted`

html5-play-pause.js

'use strict';

/**
 * @module
 * @author Oleg Dutchenko <[email protected]>
 * @version 1.0.0
 */

// ----------------------------------------
// Imports
// ----------------------------------------

import $ from 'jquery';

// ----------------------------------------
// Private
// ----------------------------------------

const _pauseAllowedKey = 'pauseAllowedKey';
const _pauseAllowedEvent = 'pauseAllowedEvent';

// ----------------------------------------
// Public
// ----------------------------------------

/**
 * @param {jQuery} $elements
 * @param {function} [onAfter]
 * @param {function} [onError]
 */
export function play ($elements, onAfter = () => void 0, onError = () => void 0) {
	$elements.each((i, element) => {
		let $element = $(element);
		element.play().then(() => {
			$element.data(_pauseAllowedKey, true);
			$element.trigger(_pauseAllowedEvent);
			onAfter($element);
		}, () => {
			$element.data(_pauseAllowedEvent, false);
			onError($element);
		});
	});
}

/**
 * @param {jQuery} $elements
 * @param {function} [onAfter]
 */
export function pause ($elements, onAfter = () => void 0) {
	$elements.each((i, element) => {
		let $element = $(element);
		let pauseAllowed = $element.data(_pauseAllowedKey);
		let after = () => {
			element.pause();
			onAfter($element);
		};

		if (typeof pauseAllowed === 'boolean') {
			if ($element.data(_pauseAllowedKey)) {
				after();
			} else {
				$element.one(_pauseAllowedEvent, after);
			}
		}
	});
}

usage-example.js

'use strict';

import $ from 'jquery';
import { play, pause } from 'html5-play-pause';

const $video = $('#my-video');
const $playButton = $('#play-my-video-button');
const $pauseButton = $('#pause-my-video-button');

$playButton.on('click', () => play($video));
$pauseButton.on('click', () => pause($video));