jrVideo

MySong
MySong
@mysong
10 years ago
155 posts
Trying to get a better understanding of jrVideo...

1 - When 'convert videos' is unchecked, even if uploaded file is MP4, it does not stream in a player. Instead video just shows as a grey box with a download button on the bottom. (just a side thing; this happens even if 'block video downloads' is checked). Is this the way it should be working? That in order for a video to stream in player, conversion has to be enabled?

2 - Video Size - when converted videos show in player, it is a much smaller size then they generally appear on youtube. Is there any way to make the videos larger? there seems to be a lot of extra room (black space) on both sides of the player.

3 - Distortion in Chrome - converted videos play fine in firefox and explorer but in Chrome their width is distorted making the videos appear thinner and distorting all their frames. Also when 'full screen' is enabled in chrome, videos appear very pixalized, as if a much lower quality version is being served.

4 - Conversion - I understand that when conversion is enabled, it converts the clip into an MP4 and also into a flash version for mobile. Question is; if there is a set bit rate that it is converted to? Is there a difference in the output quality of whether the original video was 720p or 480p?

Thanks




updated by @mysong: 09/05/14 10:14:26AM
brian
@brian
10 years ago
10,148 posts
MySong:
Trying to get a better understanding of jrVideo...

1 - When 'convert videos' is unchecked, even if uploaded file is MP4, it does not stream in a player. Instead video just shows as a grey box with a download button on the bottom. (just a side thing; this happens even if 'block video downloads' is checked). Is this the way it should be working? That in order for a video to stream in player, conversion has to be enabled?

Yeah you're going to want it enabled - it needs to be able to create the mobile version, as well as grab the screenshot. It also "activates" the video at the end of the conversion process.

Quote:
2 - Video Size - when converted videos show in player, it is a much smaller size then they generally appear on youtube. Is there any way to make the videos larger? there seems to be a lot of extra room (black space) on both sides of the player.

I've not really seen this - it will "fill in" the player as much as it can, based on the aspect ratio of the video. Note that if you're viewing the mobile version, it's a small aspect ratio (as it expects to be viewed on a smaller screen, and we want it to stream well).

Quote:
3 - Distortion in Chrome - converted videos play fine in firefox and explorer but in Chrome their width is distorted making the videos appear thinner and distorting all their frames. Also when 'full screen' is enabled in chrome, videos appear very pixalized, as if a much lower quality version is being served.

I just tested this here in Chrome 36 and I'm not seeing any issues.

Quote:
4 - Conversion - I understand that when conversion is enabled, it converts the clip into an MP4 and also into a flash version for mobile. Question is; if there is a set bit rate that it is converted to? Is there a difference in the output quality of whether the original video was 720p or 480p?

No - there's no set bit rate - it uses the "same" bit rate as the video being converted.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
Attaching screenshot of video size. This is on a regular laptop screen. Size is around half of what it would show on the smallest youtube page.
firefox-width.jpg
firefox-width.jpg  •  46KB


updated by @mysong: 07/30/14 07:09:16AM
brian
@brian
10 years ago
10,148 posts
This is correct. The aspect ratio of the video looks to be 4x3, so you're going to see it has filled to 100% of the height of the video player.

It cannot fill to 100% width as well, as that is not the aspect ratio of the video - it would have to do one of 2 things:

- somehow "zoom in" on the video and cut the top and bottom of the image off
- "stretch" the video image so it fills 100% width/height, but that is going to distort the aspect ratio of the image.

I'm certain that youtube has a custom setup to zoom or stretch (or whatever), and they also may require video to be uploaded in a specific aspect ratio.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 07/30/14 07:27:25AM
brian
@brian
10 years ago
10,148 posts
One other solution you could do if you wanted, is customize your item_detail.tpl file for the video module, and NOT have the video player be 100% width. Instead, you could look at the "video_file_resolution" value (which has the resolution of the video, in pixels - i.e. "400x320") and with some customizations set your video screen to the same aspect ratio in width/height as the video, so there's no bars on any side.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 07/30/14 07:31:03AM
MySong
MySong
@mysong
10 years ago
155 posts
Is there any way to just make the height of the video player larger. (if understood correctly; the last reply would just get rid of the empty black spaces on sides but not make the video larger).

Thanks,
brian
@brian
10 years ago
10,148 posts
MySong:
Is there any way to just make the height of the video player larger. (if understood correctly; the last reply would just get rid of the empty black spaces on sides but not make the video larger).

Thanks,

Sure - looks like you are usig the Blue Monday video player, which is controlled by the jrVideo/css/jrVideo_blue_monday.css file.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
It seems like it is set up only for 270p and 360p.

I added the following two sections for 480p

.video_blue_monday_player div.jp-audio {
width:100%;
}
.video_blue_monday_player div.jp-video-270p {
width:100%;
}
.video_blue_monday_player div.jp-video-360p {
width:100%;
}
.video_blue_monday_player div.jp-video-480p {
width:100%;
}

and

.video_blue_monday_player div.jp-video-270p div.jp-video-play {
margin-top:-270px;
height:270px;
}
.video_blue_monday_player div.jp-video-360p div.jp-video-play {
margin-top:-360px;
height:360px;
}
.video_blue_monday_player div.jp-video-480p div.jp-video-play {
margin-top:-480px;
height:480px;
}
.video_blue_monday_player div.jp-video-full div.jp-video-play {
height:100%;
}

These seem to be the only places the other sizes are mentioned in that css file.
Yet it does not change anything on front end. Is there possibly another setting that has to be set on a different file?

Thanks
brian
@brian
10 years ago
10,148 posts
I don't believe the 270p/360p settings come into play at all - they are there for backwards compatibility with older versions of the jplayer.

You should be able to set the height like this:

.video_blue_monday_player div.jp-video {
.. (other CSS rules) ..
height:500px !important;
}

Let me know if that helps.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
That definitely did something but not as expected, see screenshot.

Thanks
firefox-width.jpg
firefox-width.jpg  •  48KB


updated by @mysong: 07/30/14 10:57:36AM
brian
@brian
10 years ago
10,148 posts
Then you will need to adjust the other CSS classes in that file until it is setup as you would like. I'd recommend using Firebug (or Firefox dev tools) to see the classes involved.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
Code for height is 'inline' or 'element.style'.

I was able overwrite the div tag using !important but that does not effect the size of the actual flash clip.

It is pulling that from here



I checked all css and templates a few times but could not dig source up.

Thanks
code.jpg
code.jpg  •  39KB


updated by @mysong: 07/31/14 08:21:38AM
brian
@brian
10 years ago
10,148 posts
The jplayer javascript code must be adding the inline "700px" width style - that's no where in our code. So I am not sure how you would change that.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
Ok will see if I can find anything on https://groups.google.com/forum/#!forum/jplayer
MySong
MySong
@mysong
10 years ago
155 posts
Yes it seems to be in the Java http://jplayer.org/latest/developer-guide/#jPlayer-option-size

Any idea where this file could be accessed.

Thanks
brian
@brian
10 years ago
10,148 posts
It would be in modules/jrCore/js/jquery.jplayer.min.js - you'll however want to customize one of your own and place it somewhere it won't be overwritten, then just add the JS reference in the templates.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
MySong
MySong
@mysong
10 years ago
155 posts
Looks good now, thanks for all the help.

Still have to see if I can figure out the Chrome issue.