I am trying to make an MP3 player in HTML5. Almost all of the work is done but what I need is that I want to replace the default controls from the <audio> tag and make my very own controls. Simple controls like play, pause, stop and volume are done but I want to make a progress bar that tracks the duration of the audio/MP3 , where when I click at the relevant position goes to the specific position on the track. Like the one in the following example.
http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx
The thing here is that in the above example the file/MP3 is already load and I am actually creating an audio element by using document.createElement("audio");
When I tried using different ways to change the above example I mostly get an error “cannot call method addeventlistener of null”. I want this player to run on Chrome.
Thanks in advance for your support and help.
There's a progress bar example in this tutorial I wrote a while back: Working with HTML5 multimedia components – Part 3: Custom controls . The calls etc. should be the same for a dynamically created audio element.
But yes, some code examples of what you're doing would be useful.
Related
I'm running a projet of video galery. My problem is I want to the use the YouTube system so that when I click on a video in the list of the galery it appears in the main space and start playing (exactly what happens in YouTube). How can I do this please ?
Thanks
firstly, get the youtube api and a fetch method to get the videos,
now loop through the data returned and present it in the manner you want it. write a play method that will open a selected video on a play canvas, this is how I think you can implement what you want in bare design thinking. I dont know what technologies you're using, in my free time I'll write an example implementation in vue.js or react.js
I am building a WordPress site and have embedded a video using WP's built in video-short code. My goal is to cause the video to auto play or not, dependent on the presence of a cookie. WP appears to use MediaElement.js.
In JS I have the cookie detection sorted, but no matter what I try I can't figure out how to trigger the video to play. I am not sure if I'm just not selecting the correct element, but I'm currently trying:
jQuery(".mejs-video").play();
The console shows error: "Uncaught TypeError: jQuery(...).play is not a function"
How can I select and trigger the video generated by the shortcode?
I find a solution for myself like this :
$('.mejs-play button').click(); // Play
$('.mejs-pause button').click(); // Pause
I dont think it's the best solution (video API will be the best), but it work :)
I'm upgrading someone else's code from the flash-only player API to the Smart Player API and I'm having a heck of a time trying to find out how to hide the seek controls on either player (both flash and HTML5 versions).
The old code that works is like this:
exp = player.getModule(APIModules.EXPERIENCE);
phead = exp.getElementByID("playhead");
phead.setVisible(false);
The new code that I've been trying to translate that into is like this:
BCL.experience = BCL.player.getModule(BCL.APIModules.EXPERIENCE);
BCL.experience.getElementByID('playhead').setVisible(false);
The error is that there is no method getElementByID and I've confirmed that it doesn't look like a typical DOM object with my console. Does anyone know how I can hide or disable the seek controls on the flash and html5 player?
I'm at a total loss for how this is done and I feel that I've read every page of their API documentation without success.
Question:
How can I control the sound output of this embedded video without overly complicating things?
Possible Solution (Complex)
I've looked into the youtube javascript control API, and, correct me if I'm wrong, but that will force me to incorporate a lot of complication into the setup to accomplish what appears to be a very simple task.
Note:
This is all only tested for webkit at this stage
Setup:
I've created an element that simulates an iphone controlling the channel of a tv by swapping youtube videos like so:
var channel1 = "http://www.youtube.com/embed/dFU6Cy4Hd5A?autoplay=1&rel=0&controls=0&showinfo=0&disablekb=1&iv_load_policy=3&modestbranding=1";
$("#channel-1").click(function(){
$("#tv").attr("src", channel1);
});
where the #channel-1 id is connected to a specific button on the remote, and the tv id is connected to the video player.
It looks like this:
Edit:
If the API is the only to accomplish this, please include a link to a comprehensive tutorial teaching the youtube web API, because I've looked, and found nothing. The only thing I've found so far is the official API page, and that's like trying to learn PHP from the manual.
For loading videos you would use loadVideoById rather than the rather odd snippet you have in your question and to play without audio you simply mute the player using player.mute() (where player is a reference retrieved from the youtube player element itself like described here). And one last thing, don't forget to add enablejsapi=1 to the url of the player as described here.
I would use
event.target.mute();
I am using JavaScript to wrap an HTML5 video player in a div for styling purposes. If the mark-up exists when the page loads, the player functions as it should. However if I apply the wrapper dynamically with JavaScript, the player goes black and its controls are inaccessible. I have tested applying various elements as wrappers, and it seems to happen with any block level element, but not inline elements. I can't find any documentation on this bug or others who have encountered it via Google. Anyone have a workaround?
I see this was posted a long time ago & I ran into a similar issue.
When a video is reparented (like it would be if you used a solution like slick, it reverts to 00:00 and pauses. Once reparented, you should be able to directly access the video via JS & invoke the play() method to get it started again.