I have an activity which has list of video thumbnail. When I click on the video thumbnail I create this fragment in the middle of the screen. I am sending the video id to fragment. When the fragment opens, I click on the video to start it. The sound starts to come but the image seems to load and starts a little late. Since the sound does not stop, the picture and sound are not synchronized. Before that I used the pierfrancescosoffritti library and the result was the 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>";
}
}```
The problem is with the emulator. I did not encounter such a problem when I tried it on real device.