在android ios 手机上 点击 全屏 按钮 只能竖屏的 尝试 横屏播放
点击全屏 按钮 不能横屏 是 因为 当前页面 禁止了 横屏 可以 强制 当前页面横屏
1.利用plus
https://www.cnblogs.com/webconfig/articles/13458689.html
写上后 报错 plus is not defined
安装 两个以后 还是报错 plus is not defined
https://blog.csdn.net/baicai_123/article/details/119825350
npm i vue-awesome-mui --save
npm i vue-html5plus --save
设置
https://www.cnblogs.com/biuo/p/15311918.html
还是一样的错 不知道为什么
2. video里面的属性 不起作用
x5-video-player-orientation="portraint"：声明播放器支持的方向，横屏：landscape，竖屏：portraint，默认竖屏播放，无论是直播还是全屏H5一般都是竖屏播放，但是该属性需要x5-video-player-type开启H5模式；
https://www.cxyzjd.com/article/xcy1193068639/80242111
通过旋转的方式 确实 可以把 竖屏的 改为 横屏视频 但是 并不能全屏 也不是 点击 全屏按钮 以后 实现 的
3.通过原生方式 实现 这个测试 在app里面 确实可以实现
android
https://codeleading.com/article/5495441349/
https://www.jianshu.com/p/09fb1f3ce438
https://blog.51cto.com/u_15249199/2858213
ios
https://www.jianshu.com/p/c3db5b471af2
https://codeleading.com/article/5495441349/
4.监听 屏幕旋转 全屏的
https://python.iitter.com/other/200390.html
https://www.codeleading.com/article/32246016476/
5.js 写的js 可以 video 初始化的时候 可以实现 横屏 竖屏
https://github.com/StarFishing/VideoPromotiomComponent
https://www.cnblogs.com/1032473245jing/p/10222448.html
微信 横屏竖屏
https://www.jb51.net/article/181264.htm
第三方的 video
https://github.com/surmon-china/vue-video-player
https://github.com/LarchLiu/vue3-video-player
6 最终 解决 在原生里面 的 WebChromeClient
重写其中的onShowCustomView（全屏时调用）和onHideCustomView（竖屏时调用）两个方法
js 的方法 都不起作用
private class MyWebChromeClient extends WebChromeClient {
private CustomViewCallback mCustomViewCallback;
// 横屏时，显示视频的view
private View mCustomView;
@Override
public void onShowCustomView(View view, CustomViewCallback callback) {
super.onShowCustomView(view, callback);
//视频点击全屏 强制横屏
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
// 显示状态栏
getActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
@Override
public void onHideCustomView() {
super.onHideCustomView();
//视频取消全屏 强制竖屏
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// 隐藏状态栏
getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
}
7. 当然 也可以在h5 页面里面 写两个 video 自己写个 全屏按钮 当点击 全屏的时候 显示 横屏的video 取消的时候 显示竖屏的video 测试了 也可以完美解决 问题 这个还能适配所有的 包括在 app 在网页 在微信 等。
8.问题 有个视频横屏以后 会自动竖屏
点击全屏按钮 onShowCustomView 会自动执行 onHideCustomView
横屏 失败 偶尔会白屏
public void onShowCustomView(final View view, final CustomViewCallback callback) {
Log.e("ToVmp", "onShowCustomView");
super.onShowCustomView(view, callback);
}
问题分析
view 这个参数 全屏 传过来的 视频 有时候 就加载失败 显示的 还是 webview 内容
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
发现执行 这句话 后 就会 执行 onHideCustomView 回调 去掉这句 就不会
查询官网解释
https://developer.android.com/reference/android/webkit/WebChromeClient
onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
Notify the host application that the current page has entered full screen mode.
通知应用程序当前页面已进入全屏模式。
通知主机应用程序当前页面已进入全屏模式。在这个调用之后，web内容将不再在WebView中呈现，而是在view中呈现。主机应用程序应该将这个视图添加到配置了WindowManager.LayoutParams的窗口中。FLAG_FULLSCREEN标志，以便实际全屏显示web内容。
应用程序可以通过调用回调来显式地退出全屏模式(例如，当用户按下后退按钮时)。然而，这通常是不必要的，因为网页通常会显示自己的UI关闭全屏。无论WebView如何退出全屏模式，WebView都会调用onHideCustomView()，通知应用程序移除自定义视图。
如果这个方法没有被覆盖，WebView将会向网页报告它不支持全屏模式，并且不会响应网页请求以全屏模式运行。
onHideCustomView()
Notify the host application that the current page has exited full screen mode.
通知应用程序当前页面已退出全屏模式。
通知主机应用程序当前页面已退出全屏模式。主机应用程序必须隐藏自定义视图(之前传递给onShowCustomView()的视图)。在这个调用之后，web内容将在原始WebView中再次呈现。
getVideoLoadingProgressView()
获取要在缓冲全屏视频时显示的视图。
查询几种写法 如下
换个思路解决
a.能获取到 视频的宽高 高大于宽 竖屏播放 宽大于高 横屏播放
这个应该可以
android 中获取宽高
private void getPlayTime(String mUri) {
android.media.MediaMetadataRetriever mmr = new android.media.MediaMetadataRetriever();
try {
if (mUri != null) {
HashMap<String, String> headers = null;
if (headers == null) {
headers = new HashMap<String, String>();
headers.put("User-Agent", "Mozilla/5.0 (Linux; U; Android 4.4.2; zh-CN; MW-KW-001 Build/JRO03C) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 UCBrowser/1.0.0.001 U4/0.8.0 Mobile Safari/533.1");
}
mmr.setDataSource(mUri, headers);
} else {
//mmr.setDataSource(mFD, mOffset, mLength);
}
String duration = mmr.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_DURATION);//时长(毫秒)
String width = mmr.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_VIDEO_WIDTH);//宽
String height = mmr.extractMetadata(android.media.MediaMetadataRetriever.METADATA_KEY_VIDEO_HEIGHT);//高
LogUtils.e("playtime-----------" + duration + "w=" + width + "h=" + height);
} catch (Exception ex) {
Log.e("TAG", "MediaMetadataRetriever exception " + ex);
} finally {
mmr.release();
}
}
h5中获取视频宽高
let v = document.getElementById('video')
v.addEventListener('play', (e) => {
console.log('---addEventListener----',e)
})
console.log('--videoWidth--' + v.videoWidth)
console.log('--videoHeight--' + v.videoHeight)
console.log('--offsetWidth--' + v.offsetWidth)
console.log('--offsetHeight--' + v.offsetHeight)
b.接口下发的 同一个视频要有多种 宽高的 以便更好的适配
写法
https://www.jianshu.com/writer#/notebooks/7225827/notes/99267853
https://www.jianshu.com/writer#/notebooks/7225827/notes/99338630
网友评论