I am trying to create a webpage with a video, and when the video is clicked on (not just the controls) I can run some JavaScript function. What I would like to be able to do is display subtitles within the video, and when one of the words is clicked, I can display some information below the video depending on the word they clicked on.
I couldn't find anything on the internet that seemed to concern anything similar to this, so thanks in advance if anyone can help.
EDIT: I am now able to get the location of the click (http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/), but I need to know how to find the location of the subtitles.
Related
I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
I want to add a button on the embedded youtube video on my website. So that a user can easily download that video. Now I just need to display a button on youtube video surface ,so that a user can click the button and do some job (about the video). Button will be like this:
Click Here to see
with simple html or javascript. Thank You.
Adding a button on top of your iframe is the simple part of the solution, and you will likely find this solution helpful. to match the styling, I'd recommend a site like http://css3buttongenerator.com/
As for the second part of this question, it is more advanced to write javascript to download a video, and if you'd like to avoid that, a simpler solution would be to redirect a user to a site like this. you could even go through the steps of downloading the video, and get the final link the site provides when it is ready to download.
Hyper video is video which can:
Have links or "clickable objects or interfaces" in the video, that can be clicked, and clicking those takes you to the page or object the URL of the link points to.
Be searched by its contents. So if you remember a dialogue spoken in a hyper video, you can search the web for this video , by this dialogue or part of that dialogue.
At the conceptual level, these "links" can be normal hyperlinks or even objects in the video like a chair or a table. So clicking on the table (when it comes in the video), will take you to an information page about the video. You can view the demo here: http://insidescience.open-hypervideo.org/sequence/6 . But the creator of this project has not released the product yet, and has not mentioned how he has done it. My understanding is that you can specify the entire video by using XML,HTML,CSS3,JS.
My question: How exactly does one make a hyper video?
Have links or "clickable objects or interfaces" in the video, that can be clicked, and clicking those takes you to the page or object the URL of the link points to.
Start with HTML 5 video, then listen for play events to figure out when to add and remove the interactive elements which you position over the video.
Be searched by its contents. So if you remember a dialogue spoken in a hyper video, you can search the web for this video , by this dialogue or part of that dialogue.
That's a matter of having a timed transcription of the dialogue video, and searching it like any other content. This would usually involve server side technologies though.
I have lots of mp3s on my site that I want my friends to be able to play only- but I don't want them all downloading as soon as the page opens and would prefer them to only start downloading into the buffer if someone wants to play it- is this possible with the embed tag? I can't seem to find anything on Google so I am wondering if it's something I'll have to do in JavaScript or think of an HTML work around.
cheers
You can use javascript to construct the embeds and insert them into the DOM when a user clicks a button or something similar.
You will want to use the Object tag vs. the Embed tag for one, but that said, don't set the auto-play option and they won't load until requested.
If you want a really simple fix - don't embed the music files just have links to them. Then a user won't have the file download until they click on them (this is what blog.stackoverflow.com does for the podcasts...).
If you have time on your hands you can go for my solution... I created a separate html page for each song and used the embed tag on each. Then I just created links to the pages to open in a new window. I know... hack! But it works well, and the other related links go along with it in the new window for each song.
You could always try out Yahoo Media Player,
You just make link to the mp3s and they can play them at their own pace.
I have seen this used for PodCasts, and Playlists of Mp3s its very handy and free.
http://mediaplayer.yahoo.com/
First link
Second link
Third link
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Simple :)
You can even add album art and manipulate the order the mp3s are added to the playlist thru simple html.
http://yahoomediaplayer.wikia.com/wiki/How_to_link