A way to change video SRC priority and order? Want to list WebM first, then MP4

  • Resolved heiseheise

    (@heiseheise)


    8 years, 2 months ago

    I’m looking to carry both HEVC mp4 files and their WebM equivalents on my pages from now on. I have already made a test page with the HEVC-based mp4 files uploaded and running. Unfortunately, of course, they do not play in anything but Safari and Hardware-Accelerated IE or Edge (and on my test iOS and Android devices). Desktop Firefox and Android are out of luck.

    No problem, I thought, because then I uploaded the webm equivalents. According to this page here it should just be a matter of changing the order of the src list so that webm is listed first (so Chrome and Firefox play it back) then listing the HEVC mp4 src underneath it. Sounded like the best of both worlds; anyone on Chrome and Firefox visiting my page would get the WebM file, and IE/Edge/Safari would just ignore the WebM file and drop down to the HEVC mp4 file.

    BUT – the problem is that WordPress seems to be ignoring my changes to the order, at least in the “text” mode of the Post editor. I’ve tried changing the WebM src link to be before the mp4 src link, but it doesn’t matter; when I update the post, and check the HTML page source, it is always putting MP4 first…which means, of course, that I don’t get any video in Chrome/Firefox.

    So the question is….how can I get WordPress to respect the fact that I’m trying to change the priority order of my media files around? Am I missing something?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jacob Peattie

    (@jakept)

    8 years, 2 months ago

    WordPress has a function, wp_video_extensions() that returns an array of supported video extensions. It seems any time WordPress needs to do anything based on these extensions it does so in the order that they are defined here. Thankfully this list of extensions is filterable, which means if you filter it to move webm to the front:

    function heiseheise_webm_first( $extensions ) {
	$new_extensions = $extensions;

	foreach ( $extensions as $key => $value ) {
		if ( $value === 'webm' ) {
			unset( $new_extensions[$key] );
			array_unshift( $new_extensions, $extensions[$key] );
			break;
		}
	}

	return $new_extensions;
}
add_filter( 'wp_video_extensions', 'heiseheise_webm_first' );

    I tested it adding a video with webm and mp4 sources, and webm came first when this filter was active, and mp4 came first when it wasn’t.

    • This reply was modified 8 years, 2 months ago by Jacob Peattie.
    Thread Starter heiseheise

    (@heiseheise)

    8 years, 2 months ago

    Thanks for the reply, Jacob. So I just add this to my theme’s functions.php file? Anywhere in particular or just…anywhere in the file? And it should work immediately putting webm files first in the outputted HTML?

    The reason I ask, is that I just tried that now and it’s still doing the same thing :-\ the HTML output shows mp4 first, then webm. I already tried deleting the functions.php.bin opcache file, just in case it was still reading the old functions.php.bin file and using that.

    Not sure what I’m doing wrong here, but at least what I’m asking about isn’t off-the-wall-crazy, you seemed to see a way to do it right away.

    Jacob Peattie

    (@jakept)

    8 years, 2 months ago

    In your theme’s functions file or a plugin file.

    How are you adding the video though? Through the add media button in the editor?

    Thread Starter heiseheise

    (@heiseheise)

    8 years, 2 months ago

    Yes, I put it in the functions file.

    I added both pieces of media – the mp4 and the webm, via the media editor in the post. It seemed to be the only way I could “connect” them to each other so they’d be two sources for the same video instead of two separate videos.

    Here’s my code with the video shortlink:
    [video width="450" height="253" webm="https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.webm" mp4="https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.mp4"][/video]

    The output in the HTML looks like this, though:

    <video id="wp_mep_1" preload="none" src="https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.mp4" height="253" width="450">
		<source src="https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.mp4" type="video/mp4">
		
		<source src="https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.webm" type="video/webm">
		<object type="application/x-shockwave-flash" data="https://www.heiseheise.com/blog/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" height="253" width="450">
			<param name="movie" value="https://www.heiseheise.com/blog/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
			<param name="flashvars" value="controls=true&file=https://www.heiseheise.com/blog/wp-content/uploads/2017/10/zach_on_water_elevator.mp4">			
		</object>		
	</video>
    Thread Starter heiseheise

    (@heiseheise)

    8 years, 2 months ago

    Ah-HAH.

    It was the fact I had two ancient media-playing plugins still activated (as I’m sure you could immediately see there in the HTML output code). This is a 10 year old blog after all; I’ve got so much detritus on it that as I was writing my previous comment, I thought to myself…”hmmm, there’s a lot of stuff in that <video> tag there…perhaps some of that extra junk is getting in the way”

    I’m no programmer but I am an I.T. consultant and trial and error is what we do…deactivating those two plugins did the trick, combined with your nice little functions.php modification.

    Thank you so much, Jacob!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘A way to change video SRC priority and order? Want to list WebM first, then MP4’ is closed to new replies.