I have a rtmp video stream which is dynamically changing it's resolution and aspect ratio during the process of streaming and i wish to somehow play it on a web page.
For this purpose i have chosen a flowplayer solution, but it is not detecting video aspect ratio change during the process of streaming, though does that perfectly when flowplayer initially loaded and fetched video the first time (e.g. after reload of web-page with flowplayer on it). I wish to enable it do dynamically detect aspect ratio of the stream, changing it on-the-fly.
How it is possible?
I have tried different flowplayer' clip' scaling options, but they are affecting only the initial loading stage and constant all the time later.
Got it. Had to do the following thing in clip definition, now clip is resizing properly:
clip: {
onMetaDataChange: function(clip) {
clip.update({scaling: 'fit'});
},
... rest of the options ...
}
Related
I have a MP4 video of a product which shows a 360 of the product (so it looks like it's spinning) - I have it autoplaying on the page and looks great.
I want the user to be able to click and drag on the video to basically rewind or fastforward the video, so they can kind of scroll back and forth and spin the product around as they wish.
We have used the js-cloudimage-360-view library and used images, but because we wanted this as smooth as possible each colour had 360 images and loading times weren't great, we have MP4s which are small in size and load fast but it's just the srubbing I can't get right.
I'd had a look at this https://codepen.io/webandapp/pen/xEjjOJ too but it's supper jumpy, essentially we want if the user drags to the right it fast forwards as they drag, when they stop it should play from that point (and rewinds if dragging to the left) - this should be as smooth as possible.
The video is just a HTML video element like so:
<video id="three-sixty-video" preload="auto" controls loop playsinline autoplay muted>
<source src="/video/video-1.mp4" type="video/mp4;">
</video>
Scrubbing on a streamed video is limited by the speed at which the video can be downloaded, decoded and displayed.
For a large video on most devices and connections it is not practical/possible to do all this as quickly as a user can scroll along the video timeline.
This is why video containers (mp4 etc) often include a track of thumbnail images which are displayed when the user scrubs along the line.
In other words, it is not actually the video you see in the small image in the timeline, but the appropriate thumbnail for that time in the video.
When the user stop scrubbing, the player then requests that section of the video, decodes and displays it. This is (generally) not immediate.
If your video is small enough and is downloaded completely then you may find you can scrub as quickly as you want, but even then it may be device/client dependent - a quick local test with a number of videos seem to suggest it should scrub ok when available locally:
Using a relatively small 30MB, 50 second local mp4 video, available locally on he computer hard drive (a MAC), scrubbing is relatively smooth using the Quicktime client player.
The same video on the same device being viewed by the Safari browser rather than directly by the QuickTime client appears to be similar, although it is hard to be sure. The playback may well use very similar paths under the skin.
Using a much larger 2G, 4K, 2 minute 30 second video, also locally on the hard drive, scrubbing is again relatively smooth both in Safari and QuickTime.
As a side note, if you do decide the solution is to have the video fully downloaded before you play, that is also an interesting challenge. Most effort is usually focused on the opposite, allowing a video to start playing before it fully downloads. You may find that, providing the video is not too big, having the header info at the end (the MooV atom for mp4) will force the browser to download it fully. This is the opposite of the mp4 faststart you will see discussed some places. I'm not sure how reliable this will be as I think some browser may be clever enough to 'search' in the video by making different requests for bytes at the start and end to find the metadata.
Is there a generic way to resize the original video and put ads around?
I can do it with a specific player but it doesn't work with all players. In addition, I sometimes have access only to a proxy, not the DOM. In this case, is there a way to resize the original video and add ads around?
Here is an example:
Video view agora videochat with error
Agora video chat is showing half black and half video
I had the same issue if I use AgoraRTS plugin, also check if you are using the same codec: vp8 or h264
I would recommend specifying {fit: cover} when you are playing the video in the element using the .play() function.
It sizes the video to fit the container while maintaining the aspect ratio.
In case, the above is not the issue and you can't view the full range of the video captured by the media device, then try the steps given in the below-given link:https://docs.agora.io/en/faq/video_blank#issue-description
Do get back to us if the issue remains unresolved.
So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.
Some videos that users have uploaded have different frame widths and heights.
For example:
(Video 1) - Frame width: 1280.
(Video 2) - Frame width: 480. Frame height 360.
The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.
Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.
To give you guys more of an idea of what I mean, I've gave a link below to the html file:
https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk
.
Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.
Best regards, thanks.
In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.
<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>
Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).
Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.