How to make a hyper video? - javascript

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.

Related

Youtube Videos playing simultaneously even when modal window is closed (Wordpress)

In my client website, when we play youtube videos in modal windows, they keep playing as we close the window.
Site: https://apoloi9.com.br. Each of the html list elements, where the videos and names are organized (as shown in the picture bellow), have unique id, but I couldn't find a way to make it work.
Section specified in this screenshot
You just have to empty or reload the src of the video embed. Therefore it would be stopped. Assuming you use JQuery:
$("#yourModal").on("hide",function(){
var video=$('.yourEmbed').attr("src");
$('.yourEmbed').attr("src",video);
});
These actions can also be achieved using plain Javascript.

Remove All User Controls Facebook Video Embed

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?

How to add a button on the embedded youtube video?

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.

Is it possible to have an interactive div that does not change as the user navigates to other pages of the website?

Okay, so I wanted to try making a website that had a sort of radio feature at the bottom of the page. And I wanted the user to be able to freely navigate through the website while that radio remained with them, not interrupting the song at all, as they clicked through different pages. The radio would also have a "song selector" feature so the menus would need to stay in the same place too. Is this possible? I'm guessing not, but I thought I'd ask anyway.
edit: I'm also thinking of a similar feature but for YouTube videos. Like a div that plays YouTube videos that stays with the user as they navigate through the website.

Checking for clicks inside an HTML5 video element

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.

Categories