Add Filter to Show Cover Image When Self-Hosted Video Ends

widgets/video/js/so-video-widget.js

@@ -4,24 +4,37 @@ var sowb = window.sowb || {};
 
 jQuery( function ( $ ) {
 	sowb.setupVideoPlayers = () => {
-		const $video = $( 'video.sow-video-widget' );
+		const $video = $( 'video.sow-video-widget' ).filter( function () {
+			return ! $( this ).data( 'initialized' );
+		} );
 
-		if ( $video.data( 'initialized' ) ) {
+		if ( ! $video.length ) {
 			return $video;
 		}
 
 		$video.each( function () {
 			const $this = $( this );
+			const showCoverOnEnd = Boolean( $this.data( 'show-cover-on-end' ) );
 
 			// Do we need to set up Media Elements?
 			if (
 				typeof $.fn.mediaelementplayer === 'function' &&
 				$this.attr( 'controls' )
 			) {
-				$this.mediaelementplayer();
+				$this.mediaelementplayer( {
+					showPosterWhenEnded: showCoverOnEnd,
+				} );
+				$this.data( 'initialized', true );
 				return;
 			}
 
+			// Reset to the native poster image when MediaElement isn't in use.
+			if ( showCoverOnEnd ) {
+				this.addEventListener( 'ended', function () {
+					this.load();
+				} );
+			}
+
 			// Controls are hidden. Add click event to play/pause video.
 			$this.on( 'click', ( e ) => {
 				if ( e.target.nodeName !== 'VIDEO' ) {
@@ -31,13 +44,13 @@ jQuery( function ( $ ) {
 				const video = e.target;
 				video.paused ? video.play() : video.pause();
 			} );
+
+			$this.data( 'initialized', true );
 		} );
 
 		if ( typeof $.fn.fitVids === 'function' ) {
 			$( '.sow-video-wrapper.use-fitvids' ).fitVids();
 		}
-
-		$video.data( 'initialized', true );
 	};
 	sowb.setupVideoPlayers();
 

widgets/video/tpl/default.php

@@ -11,6 +11,7 @@
  * @var $video_type
  * @var $fitvids
  * @var $hide_controls
+ * @var $show_cover_on_end
  */
 if ( ! empty( $instance['title'] ) ) {
 	echo $args['before_title'] . wp_kses_post( $instance['title'] ) . $args['after_title'];
@@ -48,6 +49,10 @@
 	$video_args['controls'] = '';
 }
 
+if ( $show_cover_on_end ) {
+	$video_args['data-show-cover-on-end'] = 'true';
+}
+
 $so_video = new SiteOrigin_Video();
 
 do_action( 'siteorigin_widgets_sow-video_before_video', $instance );

widgets/video/video.php

@@ -142,6 +142,7 @@ public function get_widget_form() {
 
 	public function enqueue_frontend_scripts( $instance ) {
 		$video_host = empty( $instance['host_type'] ) ? '' : $instance['host_type'];
+		$show_cover_on_end = $this->show_cover_on_end( $instance );
 
 		if ( $video_host == 'external' ) {
 			$video_host = ! empty( $instance['video']['external_video'] ) ? $this->get_host_from_url( $instance['video']['external_video'] ) : '';
@@ -165,7 +166,8 @@ public function enqueue_frontend_scripts( $instance ) {
 
 			if (
 				$video_host !== 'self' ||
-				! empty( $instance['playback']['hide_controls'] )
+				! empty( $instance['playback']['hide_controls'] ) ||
+				$show_cover_on_end
 			) {
 				$load_video_js = true;
 			}
@@ -287,6 +289,7 @@ public function get_template_variables( $instance, $args ) {
 			'skin_class'              => 'default',
 			'fitvids'                 => ! empty( $instance['playback']['fitvids'] ),
 			'hide_controls'           => $hide_controls,
+			'show_cover_on_end'       => $this->show_cover_on_end( $instance ),
 		);
 
 		if ( $instance['host_type'] == 'external' && $instance['playback']['oembed'] ) {
@@ -317,6 +320,21 @@ private function is_skinnable_video_host( $video_host ) {
 		return isset( $this->skinnable_hosts[ $video_host ] );
 	}
 
+	/**
+	 * Determine if the cover image should be restored when a self-hosted video ends.
+	 *
+	 * @param array $instance The widget instance settings.
+	 *
+	 * @return bool
+	 */
+	private function show_cover_on_end( $instance ) {
+		if ( empty( $instance['host_type'] ) || $instance['host_type'] !== 'self' ) {
+			return false;
+		}
+
+		return (bool) apply_filters( 'sow_video_show_cover_on_end', false, $instance );
+	}
+
 	public function get_less_variables( $instance ) {
 		if ( empty( $instance ) ) {
 			return array();