Ok so to start, I have a php webpage that pulls info from my mysql database and populates a page of videos. These videos are displayed in a vertical accordian initally you see the thumbnail and when clicking the thumbnail it expands (accordian effect) and shows the video and plays the video and then when clicking on a new tab the previous video stops playing.
I know this can be done and I almost got it working using the google apis but it didnt work 100%
Here is the jsFiddle to see what I am talking about, I am pretty sure if I can figure out how to make this work I can then figure out how to make it work with my php, but where i got stuck last time is where if open section 1 i want the video only in section 1 to play and when i open another section i want the previously oppened tab to stop playing and play the new one.
HOpefully this makes sense
http://jsfiddle.net/mxDbn/1/
There was no solution for youtube as the API was not involved enough, or I could not figure it out, but rather to embed with flash when falsh was available and because of how videos operate on mobile devices I wouldnt have to worry about html5 playing when it was not on screen because if the video is not seen it will not play.
Vimeo did however offer a javascript api function to stop playing the video when the next page was clicked.
Related
I’m developing a portfolio site that requires a custom Vimeo player, with a play button, pause button, mute button, timer, and progress bar.This website has a perfect example of what I would need (just with different CSS).
I’m assuming that within the Vimeo player for whatever video is embedded, there is a piece of data (please forgive/correct my terminology) that corresponds to the play state, pause state, volume, and time that the video has played, which I would then link to with a Javascript event to toggle each of those for the play, pause, and mute buttons. Though from poring over the source code of the above site, and searching for online solutions, I haven't been able to figure out where that information lives.
In short, does this seem like the simplest way to achieve the effect, and if so, how would I get access to the "play state"?
I have a quite specific issue regarding Chrome's new feature where they stop autoplaying videos.
On our site we wanted the page to load as quickly as possible, so only insert a new Vimeo embed object when a user has chosen to click to watch a video. Eg. the showreel on our homepage:
https://www.splinter.co.uk/
The problem arises because we use our own custom play button, so Chrome doesn't recognise that as a user-interaction, so it doesn't think that the user has chosen to view the video, therefore it blocks the autoplay option (which works fine in Safari).
I wondered if anyone else has had this problem, and if anyone can think of a workaround?
Thanks!
On the VOD home page of Vimeo you can find a technique that is used for a case like this. https://vimeo.com/ondemand
You can preload the Vimeo player when the user hovers over your custom play button so that at the time they click the Vimeo player.js API can be used to initiate playback. player.play()
If that is not sufficient it might be needed to load the player on page load and just keep it hidden, on the button press reveal the player and use the API to initiate playback.
So what I want to achieve actually is the same as the other music players that even if I change pages I will still have the music continue to play. well I already achieved that by changing only the div content on button click. but my problem now is that once I change pages let's say to a new playlist. the player play/pause button and next/prev will not work anymore and once you play the music on the playlist it wont stop the current song playing. I am btw using codeigniter and codes are correct and working it just seems like once I change content it will apply new player javascript and the previous one will be hidden.
I wan't to post the code but all the codes are very long. well I just want to ask is there any way to dynamically load a certain div without loading the js files again? and the player will continue to function same way as it was once on the previous page
I added an audio player to my project and the player supports flash. I added to a 5 page app, to the 5 th page but it appears in the middle of the app and on every page. I have to delete it. If anyone could guide me to help get this player visible only in one page rather than every. It never disappears, irrespective of the number of page I am on.
Here's the HTML:
http://shrib.com/9ZMmFhrY
Here's the project am looking to add:
http://www.codebasehero.com/files/music-player-1.0.1/demo/
I want to embed a youtube video such that the user cannot do anything to change how the video is displayed. I don't want them to be able to pause, fast forward, rewind, or watch the video again. I am having troubles doing this.
I have gotten rid of the bar at the top and bottom and have tried to get rid of keyboard controls, but this has failed. Here is a list of my current issues:
There is a YouTube video that appears when the mouse hovers over the video. This takes you to the YouTube site. I don't want this to be available.
Even though I did "disablekb=1", you can still use the keyboard to control the video.
You can pause the video by clicking on it.
At the very end after the video is over, there is a bar at the top wherein the user can click on a link to the video in YouTube. I don't want this to be available.
Also at the very end after the video is over, you can click on a button to replay the video.
Here is my current code (using a YouTube video as a placeholder for the one that will actually be in there):
<iframe width="640" height="360" src="//www.youtube.com/embed/RMINSD7MmT4?modestbranding=0&autoplay=1&controls=0&fs=0&showinfo=0&disablekb=1&rel=0" frameborder="0"></iframe>
I did find a related post here, but I am not sure how to implement this. Plus, it only takes care of one of the problems.
If I can't do this what I want with YouTube, are there other sites that might work better?