I would like to add on the webpage two embedded youtube videos: one with song clip (LEFT) and the other with song lyrics or translation(RIGHT). The RIGHT video is made by me, so if I play them offline in two windows the lyrics are synchronized with clip. The videos are uploaded then to youtube.
The question is: how can I "join" these two videos online, so user will have just one play/pause button, and if he jumps for example to 0:12 - both videos jump to 0:12. Is that possible?
I can't make a one video with both clip and lyrics, as might someone suggest. The RIGHT video with lyrics can be in different languages, while the song clip is the same.
Thanks
You could do this with xuggler. http://www.xuggle.com/xuggler/
You would need some bits on the server to do the work and stream the results.
Xuggler is quite fast assuming you have all the videos available at request time. If you are forced to dl them from YouTube and then combine them it might get more exciting.
as of now an incomplete answer. to be completed when plugin described is built.
You could build this with Acorn, a media remixing javascript library.
The capabilities to do this (side-by-side videos) is not there yet out of the box (I've added an issue to the acorn-player repository).
All that needs to be done is build a shell (acorn-player plugin) that embeds two pieces of media side by side, and let acorn do the youtube api play-syncing heavy lifting.
Related
I'm looking for php script that set the feature image (of the post) from the video embed code.
Untill now, I saw only plugins that support specific websites. I'm looking for code that allow auto set feature image from any video embed code from any website.
Is that possible ?
A generic implementation is impossible, because there are so many different players and platforms around.
As an example, YouTube have an API that allows you to grab the same screenshot they use for their videos. Vimeo also have an API that is similar, but not the same. Then look at LiveLeak, who don't have a formal API at all, or any of the thousands of third-party video players that sites use. Many even use their own video player (think BBC and other large news sites).
The best you could hope for is a plugin that implements all of the big video sites.
I am working on a project where I need to come up with a web UI for user-training videos. I have a collection of videos stored on a server as mp4 files. Since these videos are internal to the company, I could not share it on public sites like youtube/vimeo. That is the reason I am trying to come up with a simple interface to display the videos as thumbnails and open a pop-up player.
How can I do that with PHP? Any suggestions would be very helpful.
For thumbnails you can take a deeper look into ffmepg and ffprobe. You can make Screenshots and extract info with the help of it.
Get ffmpeg information in friendly way
With the help of shell_exec you can start it with php.
You could do a Cronjob, which saves the information of new videos in the Database, so the Frontend User, can get the information quickly without waiting 5 seconds or more for pageload.
For the Video it self, i think you should google for
html 5 video control
Take a look into this Blog Post:
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
I currently use the YouTube API to allow website users to upload their videos through the site straight to our YouTube channel (adding META data etc) at the time of upload.
Ideally we would like to dynamically add some sort of title, watermark, opening screen or an image to the beginning and / or the end of the video. Essentially we just need any method of adding something to the video which adds some form of branding to it (even if just a plain company name at the bottom).
The uploads are from internal users (i.e. secure and trusted) and there is not an excessive amount so I would be happy to upload to our server first (instead of straight to YouTube), manipulate the video then upload to YouTube.
The site runs PHP on a dedicated Linux / Apache server setup.
Any suggestions greatly appreciated
Thanks
Here's a really quick and easy one: Invideo Programming. Invideo Programming lets you add a small logo to a corner of the video, or promote another video in a different corner, or both.
You can add this to the API via the Channels resource as as invideoPromotion attribute. We recently did a show on Google Developers Live explaining how to configure this on both the web UI as well as in the API. Check it out - I think this'll do what you need.
I'm trying to track down a tricky issue with MediaElement.js players. I'm using the player in multiple locations on a page, all of which are video files. These video files all point to the same url, which is a file download script that streams the file given an id. Each file has a unique id, which means the url given to the MediaElement player is of the type "/fileDownload.php?fileId={some file id}"
When I press play on one of the videos, it loads fine and starts streaming the video. However, when I pause the video and try to play another one of the videos, it won't load them at all, and will just spin forever like it's loading them. The videos won't play until the page is refreshed.
I'm not tremendously familiar with the implementation of the MediaElement players. Is it possible this occurs because MediaElement.js can't handle files coming from the same URL but with different GET parameters?
Recently stumbled upon a stock video footage site http://www.pond5.com/stock-video-footage/1/*.html , and saw that they had a preview of a video when the user hovered over a thumbnail. I want to recreate this, because it seems like useful practice and it will allow me to workout my web developing muscles.
I would like to be able to preview a video when a user hovers over a thumbnail.
For example like pond5.com. Audio is not necessary, but I would like it to look smooth like a video rather than a video preview that contains a frame every 5 seconds.
On pond5.com, I originally thought they used a gif, but it plays very smoothly. Some also contain audio. As far as I thought, audio can't be used in .GIFs
Is this a case where I would have to just upload a 2nd video for the preview?
Thank you for any help.
Pond5, the website you specifically mentioned, creates a video thumbnail with watermark and lowered quality and stores it. It is then played back using JavaScript to dynamically load a div element that contains the flash player. So no GIFs are involved. You do need to upload a 2nd video, but the steps to this project are as follows:
Server-side video thumbnail/watermarking: Not sure if there are any PHP packages that are up to the task on this one. I would write a more powerful program in C++ or C#. If you go with C#, quick and easy solution would be Microsoft Expression Encoder.
Flash/Silverlight/HTML5 video player: To play the video.
Client-side JavaScript: To load the fancy popup and the aforementioned video player. Note that you might need to use PHP and a database engine to load the thumbnail URL for the video requested.
This is what Pond5, and what many other stock-footage sites use, and the basic outline of what you would need to do to achieve similar results.