<video id="video" preload=auto autoplay controls>
<source src = "http://www.w3schools.com/html/mov_bbb.mp4">
</video>
Youtube uses notes once a user defines one in his videos.
they are called annotations. Something like this:
http://www.incomediary.com/wp-content/uploads/2013/08/types-of-youtube-annotations.jpg
Is there an easy way to display it on a specific X, Y on my video,
full screen or not? for certain reasons,
I don't want the notes to be displayed on a canvas,
just on a video. How does youtube do it? I suspect that
they don't use canvas, since when right clicking on their videos show it's a video element.
EDIT: I forgot to mention, the annotations should be able to display dynamically - for example it can be displayed all of the sudden at minute 5:33, because maybe JS received something from Node server stating so.
Related
My team and I are making a custom html video player and I'm working on a setting panel
And the first option we are mainly worried about so I'm adding first is the video quality option.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
And now what we want to do is when the user toggles on an option it will change the video source to the source that has the quality specified by the size attribute
Image reference here
PS: We are making a video player from scratch as It is on its own built with no APIs (e.g. Video.js, JWPlayer, Plyr) We are making all the things needed from scratch with pure javascript and html... and as we're making a website for streaming, and my team and I want to make a video player made by us for the website, and "maybe" later for distribution but for now we want to make a brand new video player and were just been putting this part off as we aren't sure of the best way to do this!
Edit
Also, we want the video to pause and change the quality and pick up off where it was paused
Note that for the native video the browser will decide which <source> to show and choose the first element it supports/understands (e.g. the first supported video file format): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
To circumvent that and force the browser to show a certain video source url, put in only one <source> element and manipulate the source property with javascript.
To pause and play the video in the native HTML5 video player you may use the API of the HTMLMediaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
It has the play and pause functions you're looking for.
I'm making a custom scrub bar in HTML video player. I'm creating a HTML5 video player and take a currentTime from video and it is working good, but seting currentTime after moving a scrub bar dose not working.
Firstly, I want write I've tried several possiblity to resolve this problem. I disable autoplay in video and other things, what can be.
But, one thing puzzles me. I can not have a directly URL to the video, I have a URL to JSP code on the server, and this code return to me this file. What can be a problem with it? Because, if I downloaded this movie file and set URL to directly to this movie file - with extension .mp4 - all starts working good.
Maybe it's problem with it I can not have a directly url to movie file?
I don't have any ideas to resolve this porblem. I'm counting on your help
if the video stored as an .mp4 or .ogg or .webm video file format, It would play. Here is how your html may look like.
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
<source src="http://www.example.com/waterfall-video.ogg" type="video/ogg">
Video not supported.
</video>
Having never used HTML or JavaScript before I'm really struggling to find an answer to this! I'm running a website for a local club which uses an online site builder so I haven't had to do any coding so far.
I want to show a timelapse video on one of the pages that updates every 30 mins via FTP (overwriting itself every time it updates). I've got the video uploading and playing fine but browsers are caching the video and not re-loading it when the page refreshes as the file name stays the same. I've done plenty of research and found that adding a random attribute, such as a timestamp, to the video src path would likely fix the issue (as per the below link) but I can't figure out how to do this.
Force browser to update cached HTML5 video object
As it's an online website builder, the only way to add code is to insert a 'HTML/Script' element and paste the code in there, so currently I have:
<video width="476" height="266" controls="" autoplay="">
<source src="http://mydomain.co.uk/Weather/today.mp4"
new="" type="video/mp4"/>
Sorry, your browser does not support our time lapse video.
</video>
I'm under the impression that I need some JavaScript in there to add the attribute, but as a newbie to HTML/Java I could do with some help! Thanks, Jonathan.
This will go into the video object that you have created and append a unique string to the end of the source of the video.
I did add an ID to the source in the video object to allow easier access of the source object with javascript.
var video = document.getElementById("vid");
var source = document.getElementById("vidsource");
var rndString = "?t=" + Date.now();
source.src = source.src + rndString;
video.load();
<video id="vid" width="476" height="266" controls="" autoplay="">
<source id="vidsource" src="http://mydomain.co.uk/Weather/today.mp4" new="" type="video/mp4" />Sorry, your browser does not support our time lapse video.
</video>
I would like to display a webpage with a wall of very short videos:
The videos are 1-2s long and all the same size (about 100px wide)
They are display in the form of a matrix (e.g. 10x10)
Playing the videos is triggered by user interaction (click or hover)
So far, I have tried inserting video tags using jQuery but when I reach about 60 videos, my browser (Chrome) hangs.
My question: is there a trick to display such a large quantity of videos on a single web page and what issue should I look out for to make sure the videos are ready to play before the user starts to interact.
EDIT: I understand this isn't common practice, but this project is an art installation and I need to be able to trigger all the videos (or moving images) on demand and without delay. On the other hand, the initial loading time doesn't matter so much, as the user will be made aware of the heavy load.
Thanks :)
IMO "videos are ready (...) before the user starts to interact" contradicts a leightweight DOM. You cannot have both. I'd try to show thumbnails and initialize the video with the interaction.
you could try to use the
use the
<video width="320" height="240" controls>
<source src="embed Link" type="video/mp4">
Your browser does not support the video tag.
</video>
tag inside of html. then you can acces every object by giving it a tag
The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.
Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.