360 video player with access to orientations coordinates - javascript

Anyone know a good way I can add a 360 video player to my HTML page that has the ability to access the orientation variables to set and retrieved. I have a ton of 360 videos on my computer and want to be able to display them on an html and access the variables of current time in the video as well as orientation variables to save them as a sort of bookmark.
I have looked online but have not been able to find anything besides youtubes api but I do not want them to be on youtube

Related

How is the Matrix website able to know the time of the client and show it in their video?

I recently visited the site:
https://thechoiceisyours.whatisthematrix.com/
and selecting any of the two pills will play a video showing the new Matrix movie trailer.
Question:
What intrigued me is the time shown in the video is always the same as the viewer's time. I know the browser can access user's time but am wondering how they were able to integrate it with the playing video in realtime?

Send flash video stream to JavaScript

I want to make a script that will help user to center his face in the capture preview. Some <div> that would keep his outline green if the face is kept in a defined area and red if the face goes out.
For capture, I use Webcam.js a library with Flash fail-back.
For tracking, I'm using Tracking.JS that can handle object detection from a video element.
The goal is to make a real time face positioning plugin.
Different preview modes of Webcam.js :
The HTML5 preview :
A video element created by WEBCAM.JS that has for src attribute the video stream of getUserMedia function. (The video is nice handled by TRACKING.JS)
The Flash preview (IE Fail-back):
A .swf object (webcam.swf) whos prompts access of camera, displays the preview -IN THE FLASH MOTOR- and when the user snaps, it send back the picture to Javascript.
HERE IS MY PROBLEM:
Is there a way to build/edit swf file to make it send the video stream to javascript ? (Instead of only the picture when the snap is fired) The goal is to TRACKING.JS as well the HTML5 stream than the flash one in case of.
Webcam.swf > Here is Github directory of Actionscript files.
Thank you.

Using Paper.js to highlight a region of interest in a youtube video

I'm trying to use Paper.js to build a tool that allows an user to select a region of interest within a video in their browser. This example reflects what I'm trying to accomplish: http://paperjs.org/examples/hit-testing/
Picture the user being able to create a blob around a portion of a youtube video to highlight a person. I then plan to use the coordinates from the points of the blob for some computer vision processing based on the interest of the user.
I think Paper.js is a great tool for this purpose, however, I'm having a hard time embedding a Youtube video inside a canvas element so that I can actually use Paper.js to build the tool. It's been surprisingly hard to find information on how I can accomplish this - this stackoverflow question provides an answer, but the youtube video must be downloaded rather than simply linked through its URL: Youtube video Inside canvas
Am I approaching this task correctly? Can anyone think of a way to accomplish this? Thanks!
I could not figure how to embed the youtube video inside the canvas, but I managed to do exactly what I wanted placing the youtube video behind the Canvas element! It turns out that a canvas is transparent, so all it took was some CSS to accomplish what I wanted. However, this disables the controls of the video, you will need to write some javascript for that to work. The following link explains how to place a video behind a canvas: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

Soundcloud Player Modification

I am building a website for a friend and he wants the Soundcloud player embedded with an image above it that changes each time a different song plays. Each track will have its own image that will show as the track is played in the Soundcloud player.
The image that is assigned to each track on Soundcloud does show in the embedded player, but only at a size of 150x150. I would like to disable this image and have a much larger image displayed above the player.
Does anybody know if this is possible and how I would go about doing such a thing. My knowledge of HTML and CSS is strong. However, other languages such as Javascript and PHP are fairly new to me, so please excuse any silly questions.
Thank you in advance!
The soundcloud widget has an show_artwork option. You could set this to false to hide the artwork in the player. Then you could retrieve the artwork in a larger format using the api (check for the artwork_url property of the track).

Load multiple videos without playing

I'm building a video player where each scene is filmed from multiple angles. All videos are hosted on YouTube. I'd like to allow the user to be able to switch between angles seamlessly during playback.
To facilitate this, I need a way to load videos from YouTube without playing them. That way I can load alternate angles in the background while one angle is playing. When the user switches angle, the new angle should be at least partially loaded and ready to play immediately.
Unfortunately, I can't find a way to load a video without playing it.
The loadVideoById method autoplays the video as soon as the request to load the video has returned so that won't work.
Is this possible?
There's no way to cue up a video and force it to pre-buffer.
You can load (as opposed to cue) a video and then immediately pause it, and it may or may not pre-buffer, but that's dependent on a number of factors and is outside your control as someone using the API.

Categories