So I have shot some video on a green screen, removed the background in After Effects and have saved the video in an alpha channel. I want to place the video into Adobe Captivate, these video are going to be a talking narrative throughout the slides. After importing and placing the video where I want it, I go to preview. If I preview the slides in Captivates normal previewer the background is transparent, just the way I want it. But if I preview it or publish it to HTML 5 the background becomes black. HTML 5 is what this project needs to be viewed in. Am I doing something wrong or does HTML 5 not support transparent video. Thanks for your help.
You may need to use canvas element for rendering video with transparency, see https://github.com/m90/seeThru
seeThru - HTML5 video with alpha channel transparencies
This package adds "support" for the lacking alpha channel in HTML5 elements. The original video data will simply be re-rendered into a canvas-element, therefore adding the possibility to use transparencies for your video. Alpha information can either be included in the video's source file (moving) or in a seperate -element (static).
Related
I want to create an online GIF library. I don't have any code yet because I'm only asking if what I want to do is actually possible to achieve:
Only load and play the GIFs that are in the browser's view;
Pause GIFs that are no longer in the browser's view (after scrolling down)
Is this doable?
Please check this figure: 1
It is possible to load only GIFs in viewpoint and load new as you scroll.
It is possible to hide GIFs that are no longer in viewpoint.
You can't really pause images of GIF format. You would have to use some video format like WEBM or MP4, for pausing. For example, Facebook is using video to achieve "pausing gif" effect.
We Embedded the SoundCloud HTML5 Mini Player on our website.
We are trying to change the colours of the player's elements without success.
Is there a way to change the BG colour as well as the text colours to fit our site's colour pallete?
You can provide a color parameter when embedding widget:
https://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/6981096&color=2b877f
This will make widget themed with the provided color.
If you'd like more customization you'd need to build a custom player with a library like SoundManager2 or Audio5JS or by using SoundCloud JavaScript SDK that would play sounds from SoundCloud.
I hope this helps!
This is only half an answer. You need to set the player's visual tag to false. And you cannot change the background, as of April 2015.
I want to use the Charmless youtube player in my application and I want to remove youtube logo from the Player. How can i achieve this thing? My application is developed using AS3.
Simply add ?modestbranding=1 to the end of your URL.
See more here.
modestbranding (supported players: AS3, HTML5)
This parameter lets you use a YouTube player that does not show a YouTube logo.
Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar.
Note that a small YouTube text label will still display in the upper-right corner of a paused
video when the user's mouse pointer hovers over the player.
try this API player code.
http://www.youtube.com/apiplayer?version=3&modestbranding=1&showinfo=1
Chromeless player, the modestbranding has no effect unless "showinfo=1" is must for API player.
I tried to remove youtube logo by many ways. But I didn't get success to remove it from the youtube player.
Finally I check the youtube player functionality and behavior. When video is attached to the player then it will be displayed in center. if player container height is bigger then video height so both (top and bottom) side Black strip will be appeared. Just we have to hide the Black Strip from the user display area using masking concept. (In Flash we can apply the mask to container and same thing will be done using the DOM model in Javascript.)
In directly it will be removed as per end user perspective not actually. so Indirect way youtube logo is removed from the player.
you can try GKPlugin this plugin using JWPlayer 5.x at:
https://drive.google.com/folderview?id=0B0OhZLpuvlSRTDZLMXowQWNMZTA#list
I need some advice on how to play video on a website. What I would like is to have a clip link on the page, and upon being clicked, a video player expands to the middle of the screen and plays the video (and has the standard video player controls). It also has "X" to close the video. I would suppose there is a widget or tool for this but I can't seem to find it.
Also what video resolution and format would be best (most compatible with browsers)? The video would just be a local file on the server.
Try look here:
http://rainbow.arch.scriptmania.com/scripts/music/video.html
http://www.w3schools.com/html/html_videos.asp
http://www.sothinkmedia.com/guide/makebutton.htm
Hope this helps.
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.