eneim
commented
6 years ago @shiv71 Can you show me your xml of the PlayerView?
Open shiv71 opened 6 years ago
eneim
commented
6 years ago @shiv71 Can you show me your xml of the PlayerView?
shiv71
commented
6 years ago <?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="avm"
type="com.buddynation.DroneNation.view.newsfeed.PostViewModel" />
<import
type="android.view.View"/>
</data>
<LinearLayout
android:id="@+id/parent_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="@drawable/bg_gradient">
<RelativeLayout
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="10dp"
android:layout_marginTop="@dimen/dp_10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="@{avm.isSharePost ? View.VISIBLE : View.GONE}">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profileImageShare"
android:layout_width="@dimen/post_img_size"
android:layout_height="@dimen/post_img_size"
android:layout_below="@+id/coverImage"
android:src="@mipmap/placeholder_user"
app:civ_border_width="0dp"
android:onClick="@{avm.onMainProfilePicClick()}"
app:profilePhotoUrl="@{avm.mainProfilePhotoUrl}" />
<com.buddynation.DroneNation.view.custom.TextViewBold
android:id="@+id/nameShare"
android:layout_toLeftOf="@+id/mainMenuButton"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@{avm.mainUserName}"
android:layout_marginLeft="5dp"
android:singleLine="true"
android:textColor="@color/yello"
android:layout_toRightOf="@+id/profileImageShare"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/profileImageShare"
android:layout_below="@+id/nameShare">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/dateShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{avm.mainTime}"
android:textColor="@color/gray_light"
android:textSize="@dimen/post_subtitle_mini_text_size" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/dateShare"
android:layout_marginRight="@dimen/dp_10"
android:layout_marginLeft="5dp"
android:singleLine="true"
android:textColor="@color/gray_light"
android:drawableLeft="@mipmap/location"
android:drawableTint="@color/gray_light"
android:drawablePadding="5dp"
android:textSize="@dimen/post_subtitle_mini_text_size"
android:visibility="@{avm.getMainLocationVisiblity}"
android:text="@{avm.getMainLocation}"
android:onClick="@{avm.onLocationClick()}" />
</RelativeLayout>
<ImageView
android:id="@+id/mainMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:tint="@color/white"
android:layout_centerVertical="true"
android:onClick="@{avm.onMenuClick()}"
android:src="@mipmap/ic_action_more_vert"/>
</RelativeLayout>
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/postTextShare"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/post_title_text_size"
android:paddingLeft="2dp"
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="@dimen/post_margin_left"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp"
android:linksClickable="true"
android:autoLink="web"
android:visibility="@{avm.isSharePost ? View.VISIBLE : View.GONE}"
android:text="@{avm.mainTextContent}"/>
<LinearLayout
android:orientation="vertical"
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="10dp"
android:layout_marginTop="@dimen/dp_10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:sharePostBorder="@{avm.sharePostBorder}">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profileImage"
android:layout_width="@dimen/post_img_size"
android:layout_height="@dimen/post_img_size"
android:layout_below="@+id/coverImage"
android:src="@mipmap/placeholder_user"
app:civ_border_width="0dp"
android:onClick="@{avm.onProfilePicClick()}"
app:profilePhotoUrl="@{avm.profilePhotoUrl}" />
<com.buddynation.DroneNation.view.custom.TextViewBold
android:id="@+id/name"
android:layout_toLeftOf="@+id/menuButton"
android:layout_marginRight="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@{avm.userName}"
android:layout_marginLeft="5dp"
android:textColor="@color/yello"
android:layout_toRightOf="@+id/profileImage"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/profileImage"
android:layout_below="@+id/name">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{avm.time}"
android:textColor="@color/gray_light"
android:textSize="@dimen/post_subtitle_mini_text_size" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/date"
android:layout_marginRight="@dimen/dp_10"
android:layout_marginLeft="5dp"
android:singleLine="true"
android:textColor="@color/gray_light"
android:drawableLeft="@mipmap/location"
android:drawableTint="@color/gray_light"
android:drawablePadding="5dp"
android:textSize="@dimen/post_subtitle_mini_text_size"
android:visibility="@{avm.getLocationVisiblity}"
android:text="@{avm.location}"
android:onClick="@{avm.onLocationClick()}" />
</RelativeLayout>
<ImageView
android:id="@+id/menuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:tint="@color/white"
android:layout_centerVertical="true"
android:visibility="@{avm.isSharePost ? View.GONE : View.VISIBLE}"
android:onClick="@{avm.onMenuClick()}"
android:src="@mipmap/ic_action_more_vert"/>
</RelativeLayout>
<!-- android:text="@{avm.textContent}"-->
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/postText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/post_title_text_size"
android:paddingLeft="2dp"
android:linksClickable="true"
android:autoLink="web"
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="@dimen/post_margin_left"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp"
/>
</LinearLayout>
<!-- -->
<RelativeLayout
android:layout_marginTop="-1dp"
android:visibility="@{avm.isMediaContainerVisible ? View.VISIBLE : View.GONE}"
android:layout_width="match_parent"
android:onClick="@{avm.onImageClick()}"
android:layout_height="wrap_content">
<ImageView
android:visibility="@{avm.isPhotoVisible ? View.VISIBLE : View.GONE}"
android:id="@+id/postImage"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/black"
android:scaleType="centerCrop"
app:mediaPhoto="@{avm.mediaPhoto}" />
<!-- <com.buddynation.DroneNation.view.custom.MyJZVideoPlayerStandard
android:layout_below="@+id/postImage"
android:visibility="@{avm.isVideoVisible ? View.VISIBLE : View.GONE}"
android:id="@+id/videoplayer"
app:mediaVideo="@{avm.mediaVideo}"
android:layout_width="match_parent"
android:layout_height="230dp" />
-->
<com.google.android.exoplayer2.ui.PlayerView
android:id="@+id/player"
android:visibility="@{avm.isVideoVisible ? View.VISIBLE : View.GONE}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="230dp"
app:player_layout_id="@layout/toro_exo_player_view"
app:resize_mode="fixed_height"
app:surface_type="texture_view"
app:use_controller="true" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:visibility="@{avm.moreTextVisiblity}"
android:background="#40000000"
android:padding="4dp"
android:textColor="@color/white"
android:onClick="@{avm.onImageClick()}"
android:text="@{avm.mediaPhotoCount}"/>
</RelativeLayout>
<LinearLayout
android:visibility="gone"
android:orientation="vertical"
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="10dp"
android:layout_width="match_parent"
android:layout_height="40dp"
app:sharePostBorderBottom="@{avm.sharePostBorderBottom}">
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_10"
android:layout_marginBottom="@dimen/dp_10">
<RelativeLayout
android:layout_marginRight="@dimen/post_margin_left"
android:layout_marginLeft="@dimen/post_margin_left"
android:id="@+id/rr"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/likeCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="@{avm.likeVisiblity}"
android:text="@{avm.likeCount}"
android:textSize="@dimen/post_subtitle_text_size"
android:layout_marginBottom="@dimen/dp_10"
android:textColor="@color/white"/>
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/commentCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="@dimen/dp_10"
android:visibility="@{avm.commentVisiblity}"
android:text="@{avm.commentCount}"
android:onClick="@{avm.onCommentClick()}"
android:textSize="@dimen/post_subtitle_text_size"
android:textColor="@color/white"/>
</RelativeLayout>
<View
android:layout_below="@+id/rr"
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height=".5dp"
android:background="@color/apple_light_gray"/>
<LinearLayout
android:layout_marginRight="@dimen/post_margin_left"
android:layout_marginLeft="@dimen/post_margin_left"
android:id="@+id/lcs"
android:layout_below="@+id/line"
android:layout_width="match_parent"
android:orientation="horizontal"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_height="wrap_content">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Like"
android:gravity="center"
android:drawableLeft="@{avm.likeColor}"
android:drawableTint="@color/gray_light"
android:textSize="@dimen/post_subtitle_text_size"
android:drawablePadding="5dp"
android:textColor="@color/gray_light"
android:onClick="@{avm.onLikeClick()}"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_height="wrap_content">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comment"
android:drawableLeft="@mipmap/chat_ic"
android:gravity="center"
android:drawablePadding="5dp"
android:textSize="@dimen/post_subtitle_text_size"
android:drawableTint="@color/gray_light"
android:textColor="@color/gray_light"
android:onClick="@{avm.onCommentClick()}"/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:layout_height="wrap_content">
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share"
android:drawableLeft="@mipmap/share"
android:textSize="@dimen/post_subtitle_text_size"
android:gravity="center"
android:drawablePadding="5dp"
android:drawableTint="@color/gray_light"
android:textColor="@color/gray_light"
android:onClick="@{avm.onShareClick()}"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_below="@+id/lcs"
android:layout_width="match_parent"
android:layout_height=".5dp"
android:background="@color/apple_light_gray"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginLeft="@dimen/post_margin_left"
android:layout_marginRight="@dimen/post_margin_left"
android:orientation="vertical"
android:visibility="@{avm.commentContainerVisiblity}"
android:layout_height="wrap_content">
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="@+id/likeCount"
android:background="#AEAEAE"
android:orientation="vertical"
/>-->
<RelativeLayout
android:padding="3dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/commentImage"
android:layout_width="@dimen/post_img_size"
android:layout_height="@dimen/post_img_size"
android:src="@mipmap/placeholder_user"
app:civ_border_width="0dp"
android:layout_below="@+id/coverImage"
app:lastCommentImage="@{avm.lastCommentImage}"
android:onClick="@{avm.onCommentImageClick()}" />
<RelativeLayout
android:id="@+id/commentContainer"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="@drawable/comment_box"
android:layout_toRightOf="@+id/commentImage">
<com.buddynation.DroneNation.view.custom.TextViewBold
android:id="@+id/commentName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{avm.lastCommentName}"
android:layout_marginLeft="5dp"
android:textColor="@color/white" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/commentDate"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:text="@{avm.lastCommentDate}"
android:textColor="@color/white" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:textColor="@color/white"
android:layout_below="@+id/commentName"/>
</RelativeLayout>
<com.buddynation.DroneNation.view.custom.TextViewBold
android:id="@+id/reply"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_below="@+id/commentContainer"
android:layout_toRightOf="@+id/commentImage"
android:text="Reply"
android:textColor="@color/gray_light"
android:drawableTint="@color/gray_light"
android:drawableLeft="@mipmap/reply"
android:drawablePadding="5dp"
android:onClick="@{avm.onCommentClick()}"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_marginBottom="@dimen/dp_10"
android:layout_marginTop="20dp"
android:padding="3dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/userImage"
android:layout_width="@dimen/post_img_size"
android:layout_height="@dimen/post_img_size"
android:src="@mipmap/placeholder_user"
app:civ_border_width="0dp"
android:onClick="@{avm.onCommentClick()}"
android:layout_below="@+id/coverImage"
app:userImage="@{avm.userImage}" />
<com.buddynation.DroneNation.view.custom.TextViewRegular
android:id="@+id/writeComment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Write a comment....."
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:textColor="@color/white"
android:background="@drawable/comment_box"
android:padding="7dp"
android:onClick="@{avm.onCommentClick()}"
android:layout_toRightOf="@+id/userImage"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</layout>In your example your are using Uri object to play video . My requirement is that 1.I want to pass string url for video 2.How to add thumbnail string url with player.
eneim
commented
6 years ago @shiv71 Just update your command with code highlight.
Here is how I put the thumbnail. It requires an image url for the thumbnail, and also add an ImageView to your layout. Please see this layout. Note that, PlayerView is a FrameLayout so the thumbnail view should be laid inside the PlayerView.
Here is my demo that open single/full-screen player when you click to the Video. Please take a look.
shiv71
commented
6 years ago I have 3 queries
Please reply fast it's urgent Thanks
eneim
commented
6 years ago @shiv71 Cannot have urgent answer for everything. About [1] It is not supported now. You need to wait for some future release. The reason is mostly about performance concern. [2] You need to customize your ControlView, just like how I do it with ToroControlView. [3] If you are using PlayerView, there is an xml attribute: player_layout_id. If it is set to toro_exo_player_view please remove that line, it will back to default one.
I suggest you to read documentation of ExoPlayer's PlayerView class for the customization. Doing that on demand is out of my scope.
shiv71
commented
6 years ago I have 3 queries
Is there any alternative way to start playing video when video player is about to enter on screen ? Like when we scroll and the player is about to appear from bottom.
I have added my own full screen button in toro_exo_control_view.xml and then on tap of full screen I open Dialog and add the player view on content view, but after this controls doesn't work but everything works as expected. Only issue is controls doesn't work after full screen.
How to change or set load control of player. MIN_BUFFER_DURATION, MAX_BUFFER_DURATION, MIN_PLAYBACK_START_BUFFER, MIN_PLAYBACK_RESUME_BUFFER);
Any suggestion for above three question
shiv71
commented
6 years ago I have resolve question no 2 and I want suggestion for above question 1, is there any alternative way to start playing video when video player is about to enter on screen ? Like when we scroll and the player is about to appear from bottom.
I sincerely request if I can get some help as I am blocked on this from last 3 days and have to deliver it asap.
Thanks
eneim
commented
6 years ago @shiv71
Please try 3.7.0.2804-SNAPSHOT for the (1). It is still in development, but should be fine.
Using this maven repo for SNAPSHOT build:
maven { url 'https://oss.jfrog.org/artifactory/oss-snapshot-local' }After getting this version, make this update to your Container xml: this line, it will update the state of Players when the scroll state is change and the value is at most "SCROLL_STATE_DRAGGING". You can make it to be upto Idle or Setting (Idle = current behaviour).
eneim
commented
6 years ago @shiv71
About (3) You can just use default ExoPlayer's PlayerView without modifying the player_layout_id attribute. It doesn't have the Volume control by default.
About (2) If you still need my help, I will need more information about your expected behaviour and the UI.
shiv71
commented
6 years ago @eneim the changes you suggested works but not as expected sometimes video doesn't start. Also if 2 video appears on screen then the video which is at the bottom doesn't start until the above video goes off the screen. Do you have any idea about this ?I'm looking for something similar to facebook where we scroll up/down and video autoplays even when scrolling.
eneim
commented
6 years ago @shiv71
[1] About the video doesn't start, please help to take a screen record. The timing and position of Views are important for me to correctly implement this update. And yes because of this I have not added it to the lib from beginning.
[2] About 2 video appears, it is hard to say which one should be played, so I add the interface PlayerSelector. In infinite list like Facebook, you can always scroll up to make the expected Video to be on top. In finite list, telling the library which Video is at the bottom is difficult. You can either implement your own version of PlayerSelector and keep track of the position, or you can tell me your idea so I can try. All and all, if there are 2 videos on the screen, you need to tell Toro which one you want to start playback. And it should be your decision :D. PlayerSelector is the tool to make this happen.
shiv71
commented
6 years ago 1) I've uploaded a screen recording as you've requested. Please have a look. https://drive.google.com/file/d/17rptEps8-gPaFuO6_oEjt30SQd50-dpN/view?usp=drivesdk
Found another unexpected behaviour - Sometimes the video starts even before it appears on screen.This issue arose after I've used snapshot version (3.7.0.2804-SNAPSHOT). You can check the sound in video.
2) Player selector I'll look into it. Regarding the idea how it should be handled according to me is if a video player view is 50-60% visible on screen then it should start the video and stops the previous video. Lets assume we are scrolling and there are 2 videos on screen as soon as second video from bottom comes up and if it's visibility is 50-60% then start playing it and stops the video above. Same thing should apply in reverse order if we are scrolling from bottom to top.I hope you got the idea if not let me know please.
Also I did not understand this line "In infinite list like Facebook, you can always scroll up to make the expected Video to be on top. In finite list, telling the library which Video is at the bottom is difficult.". Can you please explain this ?
eneim
commented
6 years ago @shiv71 Thanks for the information,
About "In infinite list like Facebook...", the timeline of Facebook is always long enough, so if you have 2 videos in current screen, you can always scroll up so that the Video you want to start will always be the one on top-most.
In finite list (number of items is defined and relatively small), the chance your Video stays in bottom of the list, and there are other video above it is really high. In this case, you need special way to tell that "I want this thing to start playing". Let me think about this a bit further.
shiv71
commented
6 years ago @eneim
eneim
commented
6 years ago @shiv71
if a video player view is 50-60% visible on screen then it should start the video and stops the previous video. Lets assume we are scrolling and there are 2 videos on screen as soon as second video from bottom comes up and if it's visibility is 50-60% then start playing it and stops the video above
Let consider the following scenarios:
The App starts with 2 video fully visible on screen <-- Which video would you start playback? The second one? If so how about the first one?
In current screen you have one Video fully visible and in Playing state, User drags his thumb from top to bottom, the content will appear from top. If there is a second Video appear from top, 65% visible while the previous one is 80% visible, which one you want to be in Playing state after that?
Same scenario as above, but User drags his thumb from bottom to top and content appears from bottom.
About the clips, can you share the Video URL with me (email is fine: nam@ene.im). It would be better if I can debug and get the logcat from it.
shiv71
commented
6 years ago @eneim There is very rare chance of 2 videos fully visible on screen. In my case as you've seen on the video there is gap between posts and we have other UI components as well.
The same case applies for point 2 and 3 you have mentioned.
Which video clips URL's you are asking ? We are showing videos from AWS S3 Storage and the videos are HLS streams.If you need I'll email you 2-3 URL's. Let me know please.
What I want to achieve is same behaviour like facebook does. When you are scrolling the videos doesn't show any black screen and even it starts automatically as soon as it enters in screen from bottom or if we do it reverse as soon as the bottom video about to disappear the top video plays. Can you check behaviour of facebook and guide me in right approach about handling of videos ?
eneim
commented
6 years ago @shiv71
If you can guarantee the following detail, I will be agree with your point: [1] Your videos always have the same width/height ratio and [2] Your users will always use devices with the same width/height ratio.
Though in my hand I have a Samsung S5 whose usable area has the ratio of about 16:10, a Nexus 5X whose that area of about 16:9 and an LG G7 whose that area of 19:9.
See the problem? What I want to emphasize here is: I cannot base on this limited scenario to provide a wide solution. Also, Facebook has the threshold of Video to be 50% visible, so if your video is either square or landscape, it is hard to say the best behavior. The worst case is you have 2 Videos on screen, each is 51% visible. If you can make a decision for this scenario It is easy to implementation.
In case of Facebook, which I also researched for long time to create the library, what I observed is: at one time they have the preload (I think for iOS app it still does the preload), but latest version of Android, it uses thumbnail instead. It can be observed when you have it plays for a while and scroll to make it pause. The situation maybe different at the moment so I will take a look again on the Android App.
Please give me your opinion about the worst case above, in 3 scenarios I mentioned in the other comment. I will think about your decision and may have some suggestion.
About the URL, whatever URL can be used to reproduce the issue in your clip is fine. I want to reproduce it, and see if the issue belongs to the Playback part, or to the Container part.
shiv71
commented
6 years ago @eneim I agree that there won't be fixed width/height ratio for for video and device. But what we can do is if 2 videos appear at same time then in this case run the top one and when user scrolls and then obviously first video will have less visible area. This time we can play the second video.
The same case can be applied for 51% visible video which you're talking about. If 2 videos have full visibility play the top one. If one video has more visibility than other one play the video with more visible area on screen.
I had looked at facebook app in iOS and there is one section called Watch in settings page. There are 2 videos fully visible on screen then it plays the top one always. Have a look at watch section of facebook.
Here are the URL's you have requested.
eneim
commented
6 years ago @shiv71 Ok I will take a look. At the moment there is a built-in PlayerSelector called BY_AREA. It reads: 'of all the available ToroPlayer candidate, pick the one with highest area offset, play it'. Please try that one to see if it reflects your requirement (code: container.setPlayerSelector(PlayerSelector.By_AREA)).
I will double check the video URL. Hope the CloudFront TTL is long enough :D.
How to add thumbnail image in video and how to add server video url in player