Add video JS handler to apply Able Player on all video elements.

See: #14

Author: joedolson

src/ableplayer.php

@@ -47,6 +47,7 @@ function ableplayer_enqueue_scripts() {
 	// Register/enqueue other dependencies.
 	wp_enqueue_script( 'js-cookie', plugins_url( 'thirdparty', __FILE__ ) . '/js.cookie.js', array( 'jquery' ), ABLEPLAYER_VERSION, true );
 	wp_enqueue_script( 'vimeo', 'https://player.vimeo.com/api/player.js', array(), ABLEPLAYER_VERSION, true );
+	wp_register_script( 'ableplayer-video', plugins_url( 'assets', __FILE__ ) . '/js/video.js', array(), ABLEPLAYER_VERSION, true );
 
 	// if the environment is production, use minified files. Otherwise, inherit the value of SCRIPT_DEBUG.
 	$is_production = ( function_exists( 'wp_get_environment_type' ) && wp_get_environment_type() === 'production' ) ? true : SCRIPT_DEBUG;
@@ -77,7 +78,7 @@ function ableplayer_enqueue_scripts() {
 	$css_dir = apply_filters( 'able_player_css', plugins_url( 'build', __FILE__ ) . '/' . $css_file, $is_production );
 
 	// Enqueue Able Player script and CSS.
-	wp_enqueue_script( 'ableplayer', $js_dir, array( 'jquery' ), ABLEPLAYER_VERSION, true );
+	wp_enqueue_script( 'ableplayer', $js_dir, array( 'jquery', 'ableplayer-video' ), ABLEPLAYER_VERSION, true );
 	wp_enqueue_style( 'ableplayer', $css_dir, array(), ABLEPLAYER_VERSION );
 }
 add_action( 'wp_enqueue_scripts', 'ableplayer_enqueue_scripts' );

src/assets/js/video.js

@@ -0,0 +1,11 @@
+const videoEls = document.querySelectorAll( 'video, audio' );
+if ( videoEls ) {
+	videoEls.forEach((el,index,listObj) => {
+		if ( ! el.hasAttribute( 'data-able-player' ) ) {
+			el.setAttribute( 'data-able-player', 'true' );
+		}
+		if ( ! el.hasAttribute( 'id' ) ) {
+			el.setAttribute( 'id', 'able-player-id-' + index );
+		}
+	});
+}