Html5 Video. After 20 secs of pause reset player - html5-video

So im working on a school project for a museum, we are making an info screen with a video to play for the visitors, ill like to make a function so that if one visitor is pausing the video and leave it will reset after 20 sec or so. So the next visitor dont have to reset the video by him self.
Any easy way to do that?
I just use the standard html5 video player and controls.

http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
it might help
probably you need to write your required code within
if (video.paused == true)
{
//find out code to find whether its been paused for 20 second.....may be use some timer control to get this
if(20secPaused)
{
video.currentTime = time;
}
hope it helps :)

I got help on a danish forum
a guy made an example i could modify for my own project it worked for me
the solution:
http://netkoder.dk/test/test0221.html

Related

Audio player with predetermined songs, and page transitions. best language

My dad's birthday is coming up. As a child/youth he recorder music of the radio (as many did then) and catalogued them.
I want to create a audio player that displays the songs similar to the way he wrote them ( image linked at bottom).
Has a play all for that page but also has the function to play individual songs.
If possible I would like a page turn animation when switching between pages.
I wold like it to be possible to jump to certain pages e.g page a, page b etc.
I have seen how to create simple media players where you open a file. However I haven't been able to see what I am after.
The layout I am thinking of is the song list top, and Controls at bottom.
My question(s) is which language is best for this and how best to go about doing this?
Any help would be greatly appreciated.
Thought I'd best add that I do not know programming and will be learning what I need for this project as I go. So if possible could you explain your help or indicate which part of it I will need to Google.
UPDATE
Thank you for the replies. I went with VB as suggested and would love some feedback if nobody minds. As I learned more I kept changing my design so it has taken a while to get back to you.
My plan now is to:
*Implement any changes recommended
*Change a little of the gui -
+Change the image of the Insert Tape and Play tape buttons
+Remove the Window media player (Mark not visible) and polish off the control buttons
*Use FormB as the template for the rest of the pages
*Look into compiling the program
+Test on second computer and laptop
+ Possible test on my brothers computer if he is willing to download it
As well as putting the code here I have uploaded the project to Dropbox. There are two version. With music files (62.8 MB and without 5.75 MB. Please note the files are not the copyrighted songs I have substituted them with royalty free alternatives (please see below for attribution). I I changed the file names instead of code to make it easier should I forget to change it back.
Ok the code was too long to add in so uploaded it to GithubGist
FormB vb https://gist.github.com/Phoenix830/6cc03bc9bb54bdd98aaf4641acaef075
FormB.Designer VB https://gist.github.com/Phoenix830/3f347129ebc7c4d5410c9b44a7df9a81
Custom Controls -
Lab_But vb https://gist.github.com/Phoenix830/d7bd00b16e08f116dbf12159e3d464af
Trackbar vb https://gist.github.com/Phoenix830/4e90cf4df9a3ed694e4b9aa3dc60ead6
Zip files
No music https://www.dropbox.com/s/vdjlc1648qi4bpd/Cassette%20Tapes%20-%20No%20Music.rar?dl=0
With Music https://www.dropbox.com/s/i1m5zh0449385zn/Cassette%20Tapes.rar?dl=0
I think that is everything about my current code. This is Attributes and source notes.
Music
Title Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
http://creativecommons.org/licenses/by/3.0/
01-Barry_Manilow_-_Mandy.mp3 = Arroz Con Pollo.mp3
02-Barry_Manilow-New_York_City_Rhythm = Cheery Monday.mp3
03-Barry_Manilow_-_Looks_Like_We_Made_It = Galway.mp3
04-Barry_Manilow_-_Can't_Smile_Without_You = Glitter Blast
05-Barry_Manilow-Ready_to_Take_a_Chance_Again = Industrious Ferret
06-Barry_Manilow-Tryin'_to_Get_the_Feeling_Again = Le Grand Chase
07-Barry_Manilow-Could_It_Be_Magic = Nouvelle Noel
08-Barry_Manilow_-_Copacabana = Onion Capers
S2-01-Barry_Manilow-It's_a_Miracle = Teddy Bear Waltz
S2-02-Barry_Manilow-All_the_Time = Unholy Knight
S2-03-Barry_Manilow-I_Write_the_Songs = Zazie
This flaged up as an error if I didn't mark it as code
TrackBar
https://www.dropbox.com/s/i1m5zh0449385zn/Cassette%20Tapes.rar?dl=0
I have tried removing some excess code and still have to delete commented out sections that I don't need. I don't understand this enough and can not find enough information online to implement this in my own code using this just as a guide
https://www.youtube.com/watch?v=8Gi_JFAavM4
Getting MP3 info
http://forums.codeguru.com/showthread.php?409651-RESOLVED-How-to-check-the-song-playing-in-Windows-Media-Player
I can not fully remember all the forums, Youtube videos and Microsoft documents I viewed. I will try to add them if I find them as I go over my notes.
These last few links may or may not be overkill but thought worth adding encase they are useful to someone else
Also updated keywords. If they are wrong let me know and I will change them
One of the simplest languages to learn and to easily create an interface i would say is actually Visual Basic in Visual Studio, do download that and google things like "how to play audio file in VB.NET" and "how to add directories to list in VB.NET" and try to use the directories in the list (and when a song reaches it's end) just start on the next one in the list. I would use a ListBox for this. Tell me if you need more help, i would be glad to help you program it, if you need.

Play HTML5 videos forward and backward on hover

I've been trying for days to get a specific behaviour on the homepage of my personal website. But I didn't find any good solution yet. Can someone help me please :-)
I have a homepage with a grid of short videos with different durations. I want each of them to play completely on mouse hover. On second hover most should replay normally, but some should play backward.
I read that playing videos backward was not good in terms of performance because native browser players were not meant for that. So I searched for an alternative and came to the following idea:
Double the duration of those "special" videos so they integrate their forward sequence (1-2-3) and backward sequence (3-2-1) in the same file. On first hover, the video would play its first half, and after that only, on second hover it would play the second half.
Here is a JSfiddle where I put all elements for testing… but I'm currently stuck with my poor JS skills.
HTML:
<video class="forward-backward">
<source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
<source src="http://tacco.fr/divers/forward-backward.webm" type="video/webm">
</video>
jQuery:
var figure = $("video").mouseover(hoverVideo);
function hoverVideo() {
$(this).get(0).play();
};
It may be a very bad idea in terms of performance (because filesizes are bigger to load), so I'm really open for any others.
Don't hesitate to ask if you have any question.
Thank you very much :-)
BTW: no more than 5 videos should play at the same time… I don't know how to do that…
I ran into this problem. The best solution I can think of is to use a video editor and reverse the video files themselves. Then you create two video elements, one with the forward video as the source and one with the reverse video as the source. Using javascript, you can then show the correct video (and hide the other one) depending on whether you want the video to be playing forward or backwards. Does that help?

Get video progress of OSMF Player

A few years ago, Adobe had an OSMF video player wiki, and one of the examples on the wiki teaches on how to execute something for an specific ammount of time, while the video is playing using the javascript api's.
The wiki is no longer online, so I'm no longer able to access the example. How to get the current video time? I'm able to get currently the player status but not the video time. My code is below:
function onJavaScriptBridgeCreated(playerId){
var player = document.getElementById(playerId);
playerswf=document.getElementById(playerId);
var state = player.getState();
if(state=="playing"){
isplaying=1;
completeFunc();
}else{
isplaying=0;
}
}
I think that you can do like this :
player = document.getElementById(playerId);
player.addEventListener("currentTimeChange", "onCurrentTimeChange");
function onCurrentTimeChange(time, playerId)
{
document.getElementById("currentTime").innerHTML = time;
}
This code is a part of an OSMF working example which you can find here. There are many other examples attached to the source code which you can download from sourceforge.
Hope that can help.

Hide controls - use play / pause

Is there a way when you hide controls and still be able to pause / play video ?
I've seen that when controls are visible the player works fine and reported no other problem.
I tried to find an answer on docs but no luck. So is there a way to do this ?
Many thanks and great work here!
Video.js works like the html5 video video element, where if you turn off controls the only way to control the video is through the API. The easiest way to set up what I think you're talking about would be to do the following.
videojs('my_video_id').on('click', function(){
if (this.paused()) {
this.play();
} else {
this.pause();
}
});

VB.Net and youtube videos

Is it even possible to create a code that will
Contain in a textfile url addresses to youtube videos
Then the videos would be played inner the application via Media Player? maybe or something else
Would the program know when the video ended to start next one?
Would I be able to control start stop next shuffle pause from the program buttons?
Really thanks for your answers.
Please give me some hints meanwhile cause I couldn't find any solutions how to get something like that
You could create a webbrowser that would navigate to the page plus "/#movie_player" then it would only display the player and not the rest of the page. Use "Inspect Element" in firefox to see this.
Ex. youtube.com/video_url/#movie_player
you need a shock wave flash element and you can turn that using Flash
https://www.youtube.com/watch?v=oMYmnWdCxvs
convert = TextBox1.Text
convert = Replace(convert, "=", "/")
convert2 = Replace(convert, "watch?", "")