I have an activity. When i click the video thumbnail i create this fragment in the middle of screen. I send the videoId. When fragment open, i click the video to start it. The sound starts to come but the image seems to load and starts a little late. Since sound doesnt stop, image and sound not synchronized. I used pierfrancescosoffritti library before this and the result was same. What could be the problem?
public class YoutubeVideoFragment extends BaseFragment<YoutubeVideoPresenter> implements YoutubeVideoContract.View { public static YoutubeVideoFragment newInstance(String videoId) { Bundle args = new Bundle(); args.putString("ARG_VIDEO_ID", videoId); YoutubeVideoFragment fragment = new YoutubeVideoFragment(); fragment.setArguments(args); return fragment; } @BindView(R.id.root_view) LinearLayout root_view; @BindView(R.id.webView) WebView ytWebView; private String videoId; @Override public void readBundle(Bundle bundle) { if (bundle != null) { videoId = bundle.getString("ARG_VIDEO_ID"); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = onCustomCreateView(inflater, container, savedInstanceState, R.layout.fragment_youtube_video); WebSettings webSettings = ytWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setDomStorageEnabled(true); String html = getHtmlString(videoId); ytWebView.loadDataWithBaseURL("https://www.youtube.com/", html, "text/html", "UTF-8", null); return view; } @Override public void onPause() { super.onPause(); if (ytWebView != null){ ytWebView.destroy(); } } @Override public void onDestroy() { super.onDestroy(); if (ytWebView != null){ ytWebView.destroy(); } } private String getHtmlString(String videoId) { return "<html><body>" +"<div id=\"player\"></div>" +"<script>" +" var tag = document.createElement('script');" +" tag.src = \"https://www.youtube.com/iframe_api\";" +" var firstScriptTag = document.getElementsByTagName('script')[0];" +" firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);" +" var player;" +" function onYouTubeIframeAPIReady() {" +" player = new YT.Player('player', {" +" height: 'wrap-content'," +" width: '100%'," +" videoId: '" + videoId +"'," +" playerVars: {" +" 'playsinline': 1," +" 'rel': 0" +" }," +" events: {" +" 'onReady': onPlayerReady," +" 'onStateChange': onPlayerStateChange" +" }" +" });" +" }" +" function onPlayerReady(event) {" +" event.target.playVideo();" +" }" +" var done = false;" +" function onPlayerStateChange(event) {" +" if (event.data == YT.PlayerState.PLAYING && !done) {" +" setTimeout(stopVideo, 6000);" +" done = true;" +" }" +" }" +" function stopVideo() {" +" player.stopVideo();" +" }" +"</script>" +"</body></html>"; }}```
