如何使视频在肖像上保持在自己的区域，当它将倾斜到水平它应该去全屏

Question

我正在使用JW播放器javascript库。现在想让它在移动设备上以这种方式工作-当你在纵向上，它需要保持自己不玩手机默认播放器，当你改变方向横向(水平)，它应该去全屏自动。所以我想把它做成youtube。我该怎么做呢?

Answer 1

<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();
    }
  }
})

在方向改变事件上使用全屏API并检查模式是否为横屏:)

如果你的视频嵌入到iframe中，请在iframe中添加以下属性——

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

Answer 2

代替JW播放器，我们可以使用表面视图将包括视频在内的媒体流传输到MediaPlayer对象。
第一步:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/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>

步骤2:在MainActivity类中扩展表面视图

public class MainActivity extends Activity implements SurfaceHolder.Callback, OnPreparedListener

覆盖接口方法onSurfaceCreated, surfaceDestroyed, surfaceChanged和onPrepared。

在MainActivity的onCreate方法中，你可以开始实例化MediaPlayer &使用添加到布局中的SurfaceView对象的SurfaceHolder变量:

    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());
    }

步骤3:在SurfaceCreated方法中，我们必须将surface holder分配给Mediaplayer。

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

在onPrepared override方法中，我们可以启动player &显示控制器。

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

步骤4:当用户离开Activity时，我们必须处理视频播放&从Activity生命周期方法中暂停。

@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;
    }
}

所以我们可以完全控制视频，所以我建议使用这样的自定义媒体播放器实现。请分享你的观点&给出改进这个逻辑的建议。

Answer 3

你必须使用javascript的orientationchange事件:

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

你可以检查"纵向"或"横向"使用:

event.portrait
event.landscape

通过检查横向模式，你可以动态地改变JW播放器属性以实现全屏模式。