vidio视频播放，拿来即用，转换手机横屏问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>视频播放</title></head><body><div class="video"><video id="video" controls="controls" preload="auto" poster="http://download.dcloud.net.cn/FastAndroid-mini.jpg" width="100%" height="auto"><source src="http://download.dcloud.net.cn/FastAndroid-mini.m4v" type="video/mp4"><source src="http://download.dcloud.net.cn/FastAndroid-mini.webm" type="video/webm"><source src="http://download.dcloud.net.cn/FastAndroid-mini.ogv" type="video/ogg"><source src="http://download.dcloud.net.cn/FastAndroid-mini.mp4"></video></div><script type="text/javascript">/*** 视频全屏播放旋转目前的逻辑* 视频全屏，即锁定屏幕为横屏。* 视频恢复，则解除屏幕方向的锁定。* 具体的切换，根据自己的实际业务做相应的操作。*/// Android平台的视频全屏旋转var fullScreenOfAndroid = function() {if(true) {// 最新5+API的支持var self = plus.webview.currentWebview();self.setStyle({videoFullscreen: 'landscape'});} else {// 如果暂未更新sdk，可以先使用差量升级等方式，做出兼容处理；// 旧版本下的兼容处理document.addEventListener('webkitfullscreenchange', function() {var el = document.webkitFullscreenElement; //获取全屏元素if(el) {plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏} else {plus.screen.unlockOrientation(); //解除屏幕方向的锁定}});}};// iOS平台的视频全屏旋转var fullScreenOfIos = function(videoElem) {// 监听的事件与Android平台有很大区别videoElem.addEventListener('webkitbeginfullscreen', function() {plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏});videoElem.addEventListener('webkitendfullscreen', function() {plus.screen.unlockOrientation(); //解除屏幕方向的锁定});};// 涉及到5+API的内容，均在plusready事件后调用；document.addEventListener('plusready', function() {var osName = plus.os.name;if(osName === 'Android') {fullScreenOfAndroid();} else if(osName === 'iOS') {var videoElem = document.getElementById('video');fullScreenOfIos(videoElem);}});</script></body></html>

vidio视频播放，拿来即用，转换手机横屏问题相关推荐

手机怎样转换php格式,手机视频格式转换方法适合所有手机视频格式转换|如何转换手机视频格式...
怎么转换手机视频格式,是不是所有类型的手机视频格式都支持转换?是的!!!狸窝全能视频转换器支持所有手机视频格式转换,并且转换步骤也非常简单,可以说狸窝视频转换器是目前网上最简单易用功能强大的视频格式转 ...
Flutter 如何禁止手机横屏[Flutter专题62]
问题引出群友发来问题: Flutter 怎么禁止横屏显示呀,网上说的几个方法都没有效群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义. 正文在一些特定的 App 里,我们不希望手机横 ...
关于手机横屏打开相机或者相册闪退解决方案
今天遇到一个需求就是在手机横屏的时候要打开相册相机,但是在打开的手就报错,经过一上午的查资料,看文档,知道了问题所在,原来UIImagePickerController 只支持竖屏解决思路 1,让U ...
电脑版微信小程序全屏显示方法，手机横屏方法。
电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...
android 横屏字体变小,网页自适应解决iPhone手机横屏字体变大问题
先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题.这个问题一碰到感觉很麻烦,其实解决方法却很简单. 网页自适应解决iPhone手机横屏字体变大问题网上搜索结 ...
阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）
问题描述:开发个人博客摄影版块的时候,横屏时图片出现了拉伸,点击下一张图片再点回来就能恢复正常.(理想状态:保持宽高比,当高度或者宽度达到最大时,停止缩放) 我们看一下竖屏时的图片: 嗯,完美,没有什 ...
Android手机横屏竖屏的应用
学习了一下在Android手机横屏的应用,记录下来以备查用. if(getRequestedOrientation() == ActivityInfo.SCREEN_ORIENTATION_LANDS ...
linux保存mp4格式的文件,Linux中利用ffmpeg转换手机支持的mp4格式视频文件
首先当然是需要安装ffmpeg软件包,可以直接从源中进行安装!但我安装后并不能成功执行后面所需要执行的转换命令,所以我只能重新从源码编译安装ffmpeg: (1)下载ffmpeg源码包,注意版本不能太 ...
m3u8手机批量转码_python+ffmpeg,批量转换手机中的m3u8文件
前段时间,有朋友找我帮忙,自述其手机上使用UC浏览器,缓存的电影有近千个,手机存储不够了,想把这些电影转存到PC机上,并且将其转换为Mp4文件.小事情,安排! 一.分析情况,确定方案. 首先连接手机, ...

vidio视频播放，拿来即用，转换手机横屏问题

vidio视频播放，拿来即用，转换手机横屏问题相关推荐

最新文章

热门文章