javascript - how to make video on portrait remain on its own area and when it will be tilted to horizontal it should go to full

admin管理员组

文章数量:1420561

I am using JW player javascript library. And now want to make it work in this way on mobile - when you are on portrait it needs to remain on its own are without playing with mobile default player, and when you change the orientation to landscape(horizontal) it should go to full screen automatically. So I want to do it like youtube. How can I do this?

I am using JW player javascript library. And now want to make it work in this way on mobile - when you are on portrait it needs to remain on its own are without playing with mobile default player, and when you change the orientation to landscape(horizontal) it should go to full screen automatically. So I want to do it like youtube. How can I do this?

• javascript
• android
• jquery
• css
• jwplayer

Share Improve this question Follow edited Sep 28, 2015 at 5:34 aiddev asked Sep 28, 2015 at 5:29 aiddevaiddev 1,42933 gold badges2626 silver badges5858 bronze badges 6

• Please read about javascript full screen API – Akshay Khandelwal Commented Sep 28, 2015 at 5:32
• You have to use the default mobile player as far as small iOS devices are concerned. It will always take over playback regardless. – emaxsaun Commented Sep 29, 2015 at 4:07
• On portrait I need when user click on play button video plays on its own area and not with mobile player, you mean there is no way to do this? @EthanJWPlayer – aiddev Commented Sep 29, 2015 at 5:06
• you mean that ? @Ethan JWPlayer – aiddev Commented Sep 29, 2015 at 7:54
• Not that I know of. On Apple devices (small ones), as soon as play is pressed, the full screen player takes over. – emaxsaun Commented Sep 29, 2015 at 14:27

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

$(window).on("orientationchange", function (event) {
  if (event.landscape) {
    var elem = document.getElementById("myvideo");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
  }
})

Use Fullscreen API on orientation change event and check if the mode is landscape :)

If your video is embedded in an iframe add the following attributes to your iframe--

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

Instead of JW player, We can stream media, including video, to a MediaPlayer object using a surface view.
Step 1:

<RelativeLayout xmlns:android="http://schemas.android./apk/res/android"
xmlns:tools="http://schemas.android./tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<SurfaceView
    android:id="@+id/surfView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

</RelativeLayout>

Step 2: Extend Surface view in your MainActivity class

public class MainActivity extends Activity implements SurfaceHolder.Callback, OnPreparedListener

Which overrides interface methods onSurfaceCreated, surfaceDestroyed, surfaceChanged, and onPrepared.

In the MainActivity's onCreate method, you can start to instantiate MediaPlayer & SurfaceHolder variables using the SurfaceView object you added to the layout:

    SurfaceHolder videoHolder = videoSurface.getHolder();
    videoHolder.addCallback(this);

    controller = new CustomMediaControllerView(this,true);
    controller.setMediaPlayer(this);
    controller.setAnchorView(layoutVideoFrame);

    try {
        player = new MediaPlayer();
        player.setDataSource(this, video);
        player.prepareAsync();
        player.setOnPreparedListener(this);
    } catch (IllegalArgumentException ex) {
       Log.e(TAG, "onCreate IllegalArgumentException:"+ex.getMessage());
    } catch (SecurityException ex) {
        Log.e(TAG, "onCreate SecurityException:" + ex.getMessage());
    } catch (IllegalStateException ex) {
        Log.e(TAG, "onCreate IllegalStateException:" + ex.getMessage());
    } catch (IOException ex) {
        Log.e(TAG, "onCreate IOException:" + ex.getMessage());
    }

Step 3: In SurfaceCreated method, We have to assign surface holder to Mediaplayer.

@Override
public void surfaceCreated(SurfaceHolder holder) {
    player.setDisplay(holder);       
}

In onPrepared override method, We can start player & show controller.

 @Override
public void onPrepared(MediaPlayer mp) {
    if(isVideoLoaded) {
        isVideoPrepared=true;
        player.start();
        progressBar.setVisibility(View.GONE);
        controller.show();
        player.seekTo((int) timeinterval);
    }
}

Step 4: When user leave Activity, we have to handle Video play & pause from Activity lifecycle methods.

@Override
public void onStop() {
    super.onStop();
    if(player!=null && player.isPlaying()){
        player.stop();
        player.release();
        player=null;
    }
}


@Override
protected void onPause() {
    super.onPause();
    if(player!=null && player.isPlaying()){
        player.pause();
    }
}

@Override
protected void onResume() {
    super.onResume();
    /*if(!isVideoLoaded){
        isVideoPrepared=true;
    }*/
    if(player!=null && !player.isPlaying()){
        player.start();
    }

}

@Override
public void onDestroy() {
    super.onDestroy();
    if(player!=null && player.isPlaying()){
        player.stop();
        player.release();
        player=null;
    }
}

So We have plete control over video, So i remend to use custom media player implementation like this. Kindly share your view & give suggestion to improve this logic.

You have to use orientationchange event of javascript:

$(window).on("orientationchange",function(event){...})

You can check for "portrait" or "landscape" using:

event.portrait
event.landscape

By checking for landscape mode you can change the JW player properties dynamically to achieve full screen mode.

本文标签：