I've implemented video.js on one of our sites, and our videos play normally in every browser except for Safari on Mac. It's choppy at best in Safari, if it continues to play at all.
Here's one example video, though all exhibit this behavior:
jsfiddle here: http://jsfiddle.net/e9M4a/6/
<div class='videoWrapper'>
<video
class='video-js vjs-default-skin'
poster='https://goodtogo-production.s3.amazonaws.com/videos/posters/000/000/021/large/Group_Hospitality.png'
data-setup='{ "controls": true, "autoplay": false, "preload": "auto", "height": 320, "width": 568}'>
<source src='https://goodtogo-production.s3.amazonaws.com/videos/files/000/000/021/original/Group_Hospitality_v1_with_tag.mp4' type='video/mp4'></source>
</video>
</div>
I've googled a bit and found this link http://help.videojs.com/discussions/problems/504-no-audio-and-choppy-video-in-safarimac suggesting that it could be an encoding problem, but as far as I can tell the encoding is OK, and it plays normally via Quicktime.
The video playback is choppy for me in the jsfiddle via Safari as well, so I'm pretty sure it's not something in our particular implementation on the site.
Can anyone see what's wrong?
It's simply because your mp4 file is huge in terms of file size, it's over 140mb! It's very choppy in my browser too (IE10). For a video that's 4:17 long you should be able to encode it to within 10mb only.
Also the video dimensions are big as well. Resize the video to only the dimensions you're using in the player (width: 568 and height: 320).
Then watch your movie stream smoothly.
Related
http://9gag.com/gif used to show the animations as gifs, now they are html5 videos. What is the reasoning behind such a decision?
The reason is simply that video compresses better than gif in many cases, particular when the gif is of some size or length.
Additionally, video can be streamed affecting traffic and when the displaying can start (almost right away), gifs has to be loaded completely before they can be shown (ore they will be shown slowly and progressive).
Now that most browsers are able to show video natively, video becomes a viable and desired option to animated gifs.
I am using jwplayer to embed responsive videos and I have a few issues:
First, on iPad, the video will always be small. I'm using
'width': '100%'` and `'aspectratio': '12:9'`
and the video container size is ok but the movie is really small with a lot of black screen around it. Also, if I fix the width and height, the movie is still very small.
I tried using iframe - http://support.jwplayer.com/customer/portal/articles/1406644-making-jw-player-responsive. Now the movie size is ok but I can't find an option to add poster.
if you put a tiny video on host and you want to play it as original size this issue happend.
use this below:
width: '100%',
aspectratio: "16:9",//Common values are 16:9, 24:10 or 4:3
stretching: "uniform"//stretching (uniform,fill,exactfit,none)
I'm trying to create a video clip from a DVD and play it with video.js on a web page.
The source material on the DVD is in anamorphic format, i.e. it is stored with 720 x 576 pixels, but is meant to be displayed at 1024 x 576.
I've created a mp4 file using Handbrake with its 'strict' anamorphic setting.
VLC displays the resulting file correctly, i.e. the width is stretched to 16:9 eventhough VLC media information correctly reports 720 x 576 pixels.
When I try to view it with video.js using the html code below, the video is not stretched - but square pixels are assumed.
A Google search didn't reveal much, at least not in the context of anamorphic material.
Some postings suggest to change the width to "100%" or "auto", or put the video tag into a DIV with definied dimensions.
However, the result is always the same. The dimensions of the player itself change but the displayed video remains "squished" with black bars at either side.
Is there an option I have not found, an encoding setting that I have overlooked, or a CSS trick that can strech the video's width within the player? Or is it simply not possible?
Yes, I could scale the video to square pixels during encoding, but this seems to be a waste of space.
<html>
<head>
<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
<link href="file:///home/mike/videojs-demo/video-js.css" rel="stylesheet">
<script src="file:///home/mike/videojs-demo/video.js"></script>
<title>video.js test</title>
</head>
<body>
<video id="example_video" class="video-js vjs-default-skin"
controls
preload="auto"
width="1024"
height="576"
data-setup='{}'>
<source src="file:///home/mike/videojs-demo/test2.mp4" type='video/mp4' />
</video>
</body>
</html>
Setting the width and height attributes on a video element should solve your problem. But I see that you are using video.js and only an mp4 file. If, as I suspect, you're viewing the page in Firefox, which does not play mp4 in many cases, it is using the Flash fallback, which may not adjust the aspect ratio for you.
Try making a second source tag with a webm encoded version of the video. That will allow Firefox to play the video natively rather than with Flash, which should fix the problem and will get you better performance anyway.
I'm using flowplayer for a website and it automatically chooses between the HTML5 and flash version depending on the browser capabilities. The problem I have is that when is Flash the video stretches to use the whole player, but in HTML5 is displayed correctly.
Here is how is showing in Flash (Firefox)
And here in HTML5 (Chrome)
Is it possible to fix that issue?
I'm using this code in HTML:
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf" class="flowplayer is-poster" data-ratio="0.416">
<video preload="none">
<source src="http://mysite/video.mp4">
</video>
</div>
I just managed to replicate the problem in jsFiddle
http://jsfiddle.net/xtrPm/
It turns out that buried waaaay deep within the settings is this:
http://flowplayer.org/docs/setup.html#config-options
flashfit: v5.3 whether video aspect ratio in Flash non-fullscreen mode is preserved. Only set this to true if the container's dimensions do not fit the video's aspect ratio, e.g. for playlists with clips of different aspect ratio. Note that setups with dynamic container resizing require the container to be of the same ratio as the video. The option also cannot deal with anamorphic videos as Flash is agnostic of a video's display aspect ratio.
http://jsfiddle.net/L2Exb/11/
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf"
class="flowplayer is-poster" data-flashfit="true">
<video preload="none">
<source type="video/mp4" src="http://encodable.com/uploaddemo/files/video/butterfly..mp4" />
</video>
</div>
I use this method to fix this problem.
clip: {
url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
scaling: 'fit', // this line make it work
provider: 'hddn'
},
I have a problem regarding a video that is not displayed correctly in the video.js player:
http://www.ulrichbangert.de/kakteen/zeitraffer_vjs.php?Idx=10
As you can see from the page source the dimensions of the player are set to 640x480. The video has the same dimensions which I verified by loading it into my local player and displaying the properties. But: At the left and the right of the video there is a gap of some pixels. The poster is displayed correctly without these gaps. This results in an ugly skip when the player switches from the video to the poster. The poster image is the last frame of the video.
Other videos like this one
http://www.ulrichbangert.de/orchid/zeitraffer.php?Idx=1
are playing fine without a skip but I can't find any difference between these and the faulty one.
My browser is Firefox 23.0.1 thus the ogv video is used.
Can anybody help?
Best regards - Ulrich