How do I include the same HTML5 video twice in one page? - html5-video

I'd like to include an entire HTML5 video in one spot and then a portion of the same video lower on the same page. This abbreviated syntax works for the portion of the video from 1:01 to 3:51.
<video>
<source src="foo.mp4#t=61,231" type="video/mp4" width="640" height="360"/>
</video>
But the first video shows up normally and the second, shorter video with the same source doesn't seem to get loaded and appears as a small, black video player. But loading the second, shorter video in a second page works normally.
Is is possible to load the full video and then a portion later on the same page?
Thanks.
This works fine in Linux Firefox 22.0 but has the above-described problems in Linux Chromium 28.0

Ok, I have the same problem, however I am not even trying to start one video at a different time. I am just trying to include two of the same big movie twice on a page. One loads, or the other, but not both. I tried copying the movie and naming it movie2 and include that in the code. That works. Its ugly, so I tried to instead make a symlink rather than copying the movie. This does work:
ln -s movie.mp4 movie2.mp4
So as long as you have your code with two different names, they both load. But on the server side its just one file and a symlink. This is a workaround, so I would like to find out if there is a bug or something. My Chrome is 28.0.1500.95

I guess adding query string - for example ?1 - at the end of the second video src will force browser to download the file again in Chrome
src="foo.mp4?1"

Related

Cross Browser HTML5 Video Preloading Poster Only

I'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.

How to get the video file for a movie currently playing in browser?

So I have a youtube page open where I can watch a video.
But this video was taken down by the user. My open page still has the video, if you go to it again (refresh) the new page does not.
Since I have the video loaded in my browser tab (chrome), how can I go about finding the actual file and saving it?
In the old days of YouTube, it may have been possible to find the single video file on your harddrive and save it, but this is no longer the case. As explained in this Computerphile video, all YouTube videos are now split into tiny pieces and downloaded piece by piece.
You can observe this for yourself if you open up Chrome (or Firefox's) Dev Tools and watch the nnetwork tab. You'll see:
all of the pieces of the video loading bit by bit.
One additional thing you'll learn from the Network tab is that the videos are downloaded as octet streams, so you won't be able to find the links to the pieces hidden in the DOM.
One thing you migth try is, in the Network tab, clear the results and then move the cursor to the beginning of the video. You should see the streams come up again. Right click on the path name and then do a "save as", and save it as 0000.mp4 (or whatever), for all the pieces. You should be able to reassemble these pieces in any video editing software. I tested this by getting two pieces from a random YouTube video.
I couldn't find anything that doesn't require a restart (and hence reload) of Chrome.
One (kludgy) hack if possible, though, would be to run a screen video capture and play the video.
I have done this long back using IE6, i.e. fetch the file from the temporary files location and rename it to the extension flv.
The following links should point you in the right direction, but can't say it will work for sure, as I believe recent chrome versions seem to have a defensive cache implementation.
Ubuntu Forum solutions
You might need to tweak the above for your use.
Run a screen recording/capture program such as:
Screenr
CamStudio
Then edit out the youtube bar if its visible.
The buffered video is cached at the following location:
C:\Users\<user name>\AppData\Local\Temp\flaxxxx.tmp
Note you have to change to whatever user you are using, and xxxx is a random number. Also, the .tmp file might be hidden, so make sure your windows explorer is displaying the hidden files.
While the tab is open, you won't be able to copy the file, but if you close it, the file will be automatically deleted. For doing so, download HoboCopy, extract it and after that, run cmd as administrator. Change the directory on the console to the directory where you have extracted HoboCopy and type the following command:
hobocopy C:\users\<user name>\Appdata\Local\Temp C:\videos fla1234.tmp
<user name> - replace with your windows username
C:\videos - the directory where you want the video to be copied to
fla1234.tmp - the name of the file to be copied.
Wait for the copy to be done and then you can rename the destination file, changing '.tmp' to '.flv'. This file can be played with any FLV supporting media player.
i find this software to get the video from temp files folder and play it http://www.nirsoft.net/utils/video_cache_view.html
Video file is cached, therefore suggested ways can help you to save the file. But if you deal with same problems I offer using IDM(Internet Download Manager). After installation of this application for every online video stream (e.g. all flv files in youtube) IDM brings a small picture that you can click on it and downloading will be started automatically without need of any configuration.
You have to install a browser extension to download YouTube videos. You won't find a simple URL for an mp4 file in the HTML source. Try googling "youtube downloader" + your browser name.
As far as I recall, YouTube videos are not served as a continuous HTTP resource, but instead divided into small chunks and assembled client-side by the Flash player. This is why you can jump into the middle of a video, without having to buffer the first half of the video.
Generally speaking, YouTube don't want you to rip their content, so they aren't exactly making it easy for downloaders.

Why is video playing in Firefox but not in Chrome or Safari?

I have a video thumbnail on the top right of this screen that, when clicked, plays fine in Firefox. However, in Chrome and Safari the video will not play. The loading image spins forever and will not continue to the video.
Any advice is much appreciated. I have tried upgrading VideoJS from v2.0.2 to v4.1.0 and that still did not solve the problem.
Here is the link: http://www.therefinerycreative.com/#!/theatrical
I believe it is the actual source movie files that are the problem. The mp4 file is 15mb which is quite big for a 1 minute movie. I can see the dimension size of the movie is fine. Try decreasing the size of the file down first. Or to save you time first, try putting in the standard video from videojs just to double check that it definitely is the source file(s). http://vjs.zencdn.net/v/oceans.mp4
I also noticed that you use an ogg file too. In most cases you can get away with just using an mp4 file. Try both of these solutions and let me know how you get on.

Can't play video with Windows XP and IE8

I can't have the player working on IE8 with win xp (works well on IE8 with win 7)
I have two "source" tag with one ogv file and one mp4 file.
The player tags are added to the dom with ajax.
Then, the video-js player is loaded with "_V_("videoID", ..."
As said before, it works well with newer configurations, so the code is right.
If the player tags are not added to the dom with ajax, it works well. But in my case, I need to add them this way.
What I see when I load the page is that the player is there, the big play button is there. When I click play, I get the beginning of the video then it stops. Furthermore, the video is not in the good resolution, it's smaller and in the top left corner!
See picture (black is the player, and the white square is the badly shrinked video ):
In addition to that, I have a javascript error on line 1191 :
(I tried to comment out the line just to see what happens but no change)
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
Using : Version 3.2.0
Thanks for any help
PS: sound can be heard but it's all jerky and CPU hits 100% when playing
Found the bug!
I used the "seekIntro" function when the video is loaded.
When I remove the ".addEvent" line it works fine!
_V_("videoTag-<%=luo_Video.getId()%>").ready(function(){
myPlayer = this;
myPlayer.addEvent("loadeddata", seekIntro);
});
function seekIntro(){
myPlayer.currentTime(4);
}

MP4 in Video.js not playing until fully loaded

I'm using Video.js to play back videos in MP4 format on a client's website.
The player uses html5 video and Adobe Flash Player as a fallback.
(In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player as well.)
The video only starts playing after the *.mp4 file is completely loaded. So no buffer for a few seconds. The file must be completely downloaded by the browser before it starts playing.
When the video is long, the visitor has to wait very long before he can even see that the video is working.
The question now is, is it the browser, the script (video.js) or the video file that creates that problem.
On the videojs.com website however the video is playing back while loading, so works properly. Therefore I think it can't be the browser.
Has anyone else had that problem? How can I fix this issue?
Any advice is very much appreciated!
Thanks
Max
That occurs because the moov atom of the mp4 file is on the end of the file, the player needs to know the moov atom before start playing, you can move easily the moov atom to the beginning of the file with MP4Box, there is a gui version for Windows.
In Linux command line you move the MA with: MP4Box -add my_video.mp4 my_newVideo.mp4.
This takes a few seconds.
More info:Adobe's explanation of moov atomhere
Are you sure that you have your tag with preload="none" because I was having the same issue and I had preload="auto". I changed it to "none", it worked great!!
My issue had nothing to do with the moov atom because I tried that too and it didn't have any effect. I even removed this converted video and it still worked with preload="none".
kjsharks
I use this command to add the metadata:
MP4Box -isma your-file.mp4
;)
Quoting http://docs.videojs.com/docs/guides/options.html
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.