Current state of browser support for native alpha vs. seeThru

[jcklpe]

I'm just checking in. Seems that this project is being actively developed. I see that alpha video was put into Chrome about a year ago, but when I try and look up support for other browsers I can't find anything. Should I consider the state of alpha video in browsers to require this hack for the forseeable future?

[m90]

I have to admit I haven't used this in production since I initially created it in early 2012, so my knowledge about the latest developments in terms of browser support is rather limited.

From what I have heard of others that have used it more recently the most future proof way of handling with transparent video is probably using native transparencies if available (i.e. Chrome) and use seeThru as a fallback only. Ideally this should make seeThru render itself useless over time.

That's about all the input I can give you on this, but I'll leave this issue open for discussion in case someone else with more recent experience comes along.

[jcklpe]

Awesome thanks! It seems real cool. I'm thinking about trying it out for a new project so I'll post if I find out more info in the process.

…

On Fri, Oct 13, 2017, 7:12 AM Frederik Ring ***@***.***> wrote: I have to admit I haven't used this in production since I initially created it in early 2012, so my knowledge about the latest developments in terms of browser support is rather limited. From what I have heard of others that have used it more recently the most future proof way of handling with transparent video is probably using native transparencies if available (i.e. Chrome) and use seeThru as a fallback only. Ideally this should make seeThru render itself useless over time. That's about all the input I can give you on this, but I'll leave this issue open for discussion in case someone else with more recent experience comes along. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJA4zqgXud9Sy8l2vv46II0Qq5FqNhjMks5sr1OWgaJpZM4P3fqs> .

[rhelling]

I'm currently running this on https://ultimaker.com/ using a video element with a webm and a mp4. When the browser doesn't has support for webm i load seethru. I'm working for ultimaker to build a new frontend, so this is temporary solution. It might be valueble to document how to use seethru as a 'polyfill' like this:

const video = document.createElement('video');
if ($videoElement.length && video && !video.canPlayType('video/webm')) {
    if (/iP(od|hone|ad)/.test(window.userAgent) && $videoElement.attr('crossorigin')) {
        // do not use cdn on iOS as it doesn't support crossorigin attribute on video elements
        $videoElement.find('source').each((index, s) => {
            s.src = s.src.replace(/http(s|):\/\/[^/]*/, '');
        });
    }
    this.sequences[switchId] = seeThru.create($videoElement, {alphaMask: true});
}
else {
    this.sequences[switchId] = $videoElement;
}

<video class="alpha" autoplay="" playsinline="" loop="" muted="" oncanplay="this.play()" onended="this.play()" crossorigin="anonymous">
	<source src="//d3v5bfco3dani2.cloudfront.net/src/media/video/products/um3/hero/hero_loop_alpha.webm" type="video/webm">
	<source src="//d3v5bfco3dani2.cloudfront.net/src/media/video/products/um3/hero/hero_loop_alpha.mp4" type="video/mp4">
</video>

[ataylor32]

These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mov" type="video/quicktime">
</video>

Here's a demo you can test with

[safeisnotanoption]

@ataylor32 what software do you use to convert videos to HEVC?

[ataylor32]

@safeisnotanoption https://kitcross.net/hevc-web-video-alpha-channel/

[safeisnotanoption]

@ataylor32 Are there any converters that work on other OS?

[ataylor32]

@safeisnotanoption Not that I'm aware of

[Xamsix]

@ataylor32 discovered today that the transparent mov is only supported in newer Safari browsers. For example safari 11, which was released only 3 years ago, it wont work. So I do think I'll be using this tool now.

[marcusx2]

These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mov" type="video/quicktime">
</video>

Here's a demo you can test with

While that's true, this doesn't work for WebGL applications. Safari on iOS 16.4 and later do not respect the alpha channel of HEVC files. Same for Safari on MacOS.