A client wants the subtitles out of the way of the video, so they want it underneath the video. We are using vtt files for our captions. Can this be done in CSS? Maybe some settings in the vtt file?
short answer... no.
longer answer... you could parse the vtt and manually display the captions outside the <video> tag, there are a few JS libraries out there to do this (eg Mozilla have a very thorough implementation, though depending on your captions you may be able to get away with something a lot more lightweight)
Related
Normally I would embed a gif like so.
<img src="http://i.imgur.com/awHPuBp.gifv">
Although I get an error that the image could not be loaded.
I'm just wondering what mark up I will need to use so that I can display the GIFV.
GIFV is created by imgur and more information can be found here.
I just checked that demo site. It seems that they just convert the video to a webm video (in case of Firefox). Check this file here which comes from the demo: http://i.imgur.com/A61SaA1.webm
So I would say you could also just use the <video> tag to embedd those "gif" files. I just guess that use a feature detection and a video converting logic. No idea what this nonsense should be for.
I've written an HTML5 application that computes graphs at runtime and displays them in a canvas element.
I think that the answer to this question is probably "no", but I would like to know for sure if there is some way of programming my HTML5 application to take a series of these images and turn them into a video file, like an mpeg, for example.
In other words, I understand that HTML5 provides the video tag to embed videos in a web page, but can it be used to create videos at run-time?
The video element is play only (decoding)--it doesn't do encoding.
But...
If your user's browser supports WebM (modern versions of Chrome,Opera,FF,IE) then you can use WHAMMY to encode a .webm video file on the client-side. Here's a blog post by its creator, antimatter15:
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/
Coincidentally, antimatter15 also created a client-side .gif encoder. If you are just stringing together a limited number of images you might consider an animated .gif instead of encoding a whole video. Here is antimatter15's code to copy a series of canvas drawings into an animated .gif:
https://github.com/antimatter15/jsgif
Good luck with your project!
I want to post some mp4 videos in my site and I don't want to upload it to youtube or any 3rd party web app which will let me embed it into my website. I also don't want to use any blogging system like wordpress, drupal. So then what is the best way to post it to my site so that most devices will be able to view it. And can I customize the player which I use?
I have seen w3schools html5 video but I didn't find it helpful. I have also seen ' Video onto a website without plugins ' but I am not satisfied with that.
[Hint: I am ready to convert my video into any format required.]
Thanks in advance.
I have used video.js for this purpose, it worked for me. I haven't tried editing it much, but it has options.
http://www.videojs.com
Use the HTML 5 video element. You'll have to upload your video in different formats, since there is no video format that is supported by all browsers, but support for the video element itself is quite good. IE8 doesn't support it, but IE8 is already very old. With the video tag you don't need Javascript or flash plugins.
For an overview of browser support see CanIUse. Another source with much detailed information about video formats and how to convert them is DiveIntoHTML5.info.
I am making a kind of a social network. I am now in this part where I allow users to upload their videos and allow others to watch them. I have been researching on the HTML 5 video tag. People say that it would be better to give multiple sources for a video with three different formats namely ogg, mp4 and webm for different browser compability. But the user may upload any kind of video. It may be an avi or an flv or whatever. I am sure that there is a possible work-around. I know that facebook and youtube use flash. But I have exactly no idea on how to get started with flash on HTML. Is there any way around or any guide for flash ? Please Help me out.
I know that facebook and youtube use flash.
They do, but not as a work around for limited browser support for arbitrary uploaded videos.
They transcode the videos (you could do this with ffmpeg) on a server into all the formats that they support.
I'd suggest using an existing Flash video player, such as JWPlayer or FlowPlayer.
Their integration is very easy, as you'll just have to include some JavaScript and CSS files in your HTML page header. Then for every video you want to display you're putting a small HTML snippet at the position where you want to show the player.
This is the default snippet for FlowPlayer:
<div class="flowplayer">
<video>
<source type="video/mp4" src="/path/to/intro.mp4">
</video>
</div>
The title pretty much says it all. I have a spot on a webpage that currently plays a video. I'd like to update the page such that I can add a line of code with a reference to a couple files located in a folder with the source, and the page will play the first video, then the second, etc. until it reaches the final video, and then play the first video again, looping indefinitely. It's extremely preferable that this line of code would be able to play video files, .swf files, pictures (for a pre-determined length of time), etc.
Currently, I'm just using a very rudimentary
<video width="100%" height="100%">
<embed loop="true" showcontrols="0" align="left" src="New Site Folder\DemoVid_sound_mods.avi"/>
</video>
The problem with this, though, is that it only plays one video, and if I want to add more parts to it, I have to edit the video itself, rather than just popping a new file in the folder.
I saw another question answered that mentioned doing this with javascript, but the whole point of this project is to make it exceptionally easy and quick to update. The main thing I'm looking for here is for us to be able to update the page by opening a file in notepad, adding a line of code, saving, and running it.
Any thoughts? Even just a pointer on what commands might be useful here would be helpful. Thanks in advance!
As far as I know you won't be able to do this with the inbuilt html5 video players native to the browser, It's just not the principle on which they are built.
What you are looking for is more of a media playlist style set of features.
You will have to use one of the javascript based html5 video players to get some of these features but even then I'm not sure of the support for swf and image files I've seen a few which do various videos and audio files but nothing HTML5 which also does swfs also as again, the premise of these players is usually to eradicate flash.
My best suggestion for doing all of these in one single embed is to use flash via the longtail/jw player or flowplayer which handles playlists etc or perhaps slideshowpro which I know does both images, video and I think audio too.
Finally.. harking back a decade or so. theres a Language which is pretty underused and suffers varied support called SMIL which supports all of these elements you mentioned however it's uptake sort of fell apart with the introduction of video in flash. I remember that Realplayer and Quicktime could serve SMIL files but I'd be pretty cautious to do anything in SMIL these days.
Hope that helps.
A