I have a page where the user can click a button to play word pronunciation,
you can take a loot at http://japaneseclass.jp/note/open/351
Right now, the page uses flash player, and it is really heavy to load about 100 flash sound button on a single page.
I have already tried other flash player such as 1bit player, and they are all the same (heavy)
What are some other alternatives?
I tried to use embed, and it is also heavy.
What I have in mind is to use img button and use javascript to play it, but I dont know how.
You could create one flash audio player that sits somewhere on the page unseen, and make your buttons call it using ExternalInterface, passing a reference to the mp3 you want to play. That way the actual media player is very small, and it loads in the audio tracks on demand.
Related
I have video that will be divided into 4 videos.
First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
How can I make that using VideoJS or any other video player ?
After searching, this is the answer ...
For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3
For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.
As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:
First the player will stream a lower resolution of the original video,
This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)
then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.
How can I make that using VideoJS or any other video player ?
Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.
Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.
Have a nice day!
Please feel free to suggest a better title for this post, as I wasn't sure how to properly describe the problem in one short question.
I've got a media player page with an HTML5 player and the option for the visitor to choose to play the video or audio for that page. While one is playing, a button to switch to the other is available. For example, if the visitor is playing audio, a "Switch to Video" button is available, which essentially removes the current content and replaces it. This effectively removes the current HTML5 player from the DOM tree as well, of course. In addition to replacing the content, a 'pause' event is triggered on any audio or video element on the page prior to loading the new content.
Unfortunately, if you switch between audio and video quickly enough, you'll end up with multiple items playing simultaneously.
I need to make sure this doesn't happen.
How can I ensure that when I replace the player, the previously loading file does not play?
To see this happening, go to http://www.onlinechurchmediacenter.com/mc/vertigoelectric/5628, choose either audio or video, and once it starts playing keep clicking the "Play Audio" or "Play Video" link which appears below the player. If you continuously click this quickly enough, you'll begin to notice multiple instances of the audio/video playing over each other.
I'd advise not to remove the elements from the DOM. Just hide them and trigger the pause. For good measure, trigger another pause before you play the next item.
I'm using the flvplayback component in an AS3 movieclip. I do have the source defined in the compontents properties to a video hosted on Amazon s3.
Now the problem is as soon as the swf loads in a browser it starts downloading/buffering the video even though it's not set to autoplay.
Is it possible to only have it start downloading if the play button is clicked (I do have a custom play button hooked up to player via AS3)? I have 3 separate video players in the swf each with fairly large videos and I don't really want to burn through a ton of bandwidth especially if the user only plays one video.
Thanks!
I haven't used the flvplaybackcomponent, but I'm assuming as soon as you specify a url, it'll start downloading. Try either not setting that until it's been interacted with, or -- do what everyone else does -- place an clickable image on top, then once that's done, create your video player.
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.
If I embed a video demonstrating my application in my home page, will it slow down the page to a considerable amount?
I tried, and checked that it takes almost 1 sec, to load the preview of the video.
And as the video stream will not be downloaded until, the video is clicked, the total video do not have to get downloaded.
Is it recommended to embed a video in the home page? Or should I just keep it in a different page and put a link in the home page.
If you are embedding a flash flv video then yes, it could slow the page load down. This is because the page will need to load the flash plugin in order to get the content size, etc and render the initial frame etc.
Doesn't mean it's a bad thing though. It won't be an extreme slowdown (flash is pretty highly optimised nowadays), so instead evaluate on how it looks rather than performance unless you are trying to eke out every dreg of performance on your page load :)
Here one way you can have your cake and eat it too:
Don't put the flash player on the page that you will load by default....
Put in an image that looks like the player instead (it should be much lighter) .
If / when your user clicks on the player image, load in the flash player and play.
Every object you add to a page can slow down the page's loading time. In general don't include anything if the load time isn't worth the added benefit of having that item.
That being said, you can optimize the page by doing some tricks so that the page renders and THEN the flash video loads. You could pre-generate a thumbnail of the flash player/video and put it on the page in the same place as the video, then on page load use javascript (jquery: $(document).ready()) to create the flash object. This may improve the perceived performance. Even better, you could defer loading the video until the user clicks a button or something.
Everything you embed will slow down the page's initial load.
You have several options: (A) embed the video in its native format (mpeg, avi, etc) or (B) convert it into Flash. A good thing about flash is that it's near universal and highly optimized, so loading the flash plugin takes little time.
The whole video needn't load for the page to finish loading (only the player), so if we're just talking about 1 video, it would make sense to embed it in the page so as to provide a better user experience.
Have a look at both of Mr. Shiny and New's points. They're valid as well.