html5视频全频播放

旋转90度

对video进行缩放

修正position

效果还凑合

代码

$(media).rotate({
// angle: 90,
duration: 100,
animateTo: 90,
callback: function() {
console.log('rotate...');
var rate = vm.screen_height / vm.screenWidth;
var top = (vm.screen_height - vm.screenWidth) / 2;
console.log('media.videoHeight: ' + media.videoHeight);
var left = (vm.screenWidth - media.videoHeight * vm.screenWidth / media.videoWidth) / 2 - 2;
//需要视频的高度
$(media).css({
zoom: rate * 100 + "%"
});
$(media).css({
top: "-" + top + "px",
left: "-" + left + "px"
});
}
});

奈何android不支持

android上不支持videoHeight,videoWidth ,WTF

然后直接如下改动居然可以了

首先设置video的宽度为屏幕高度,video高度为屏幕宽度,没错,就是反的。暂时不知道有没有其他的适应性问题.

var top = (vm.screen_height - vm.screenWidth) / 2;
$(media).css({
top: "" + top + "px",
left: "-" + top + "px"
});

html5视频全频播放的更多相关文章

  1. HTML5入门3---视频播放器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  2. videojs实现双击视频全屏播放、播放器全屏时视频未全屏

    https://blog.csdn.net/staritstarit/article/details/78451963 暂停时只能使用左下角的暂停按钮,点击视频时不再响应 使用width和height ...

  3. HTML5入门6---视频播放按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

  5. andriod\iphone视频禁止全屏播放

    x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" ...

  6. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  7. [Winform]Media Player组件全屏播放的设置

    摘要 在设置程序开始运行时,让视频全屏播放时,直接设置 windowsMediaPlay.fullScreen = true; 会报错,代码如下 windowsMediaPlay.URL = _vid ...

  8. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  9. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

随机推荐

  1. Method not found : Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean)

    找不到方法:“Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean) ...

  2. C#将科大讯飞语音合成文件转换为MULAW音频格式

    任务描述:通过科大讯飞语音合成组件在线完成文本转语音的合成,然后再转换为电话系统IVR要求的音频格式: wave mu-law 16位 8kHZ 64kbps. 完成步骤: 首先,我们要先通过科大讯飞 ...

  3. mysql监控和优化(2)

    mysql主从复制 3个线程完成复制:主库1个线程负责记录数据库变更日志从库1个线程负责拉取主库的变更日志从库1个线程负责执行主库的变更日志实现了获取事件和重放事件的解耦,允许异步进行.复制的瓶颈:主 ...

  4. Teamcenter 2007 "由于某些意外的 DBMS 错误失败"

    PLM系统实施过程中经常需要做整个系统的克隆备份.Teamcenter2007在做基于Oracel的系统克隆时,用exp功能导出数据表,部署在目标机器上时会遇到DBMS错误,导致后续DB写操作无法进行 ...

  5. vim 配置

    backspace有几种工作方式,默认是vi兼容的.对新手来说很不习惯.对老vi 不那么熟悉的人也都挺困扰的.可以用set backspace=indent,eol,start来解决. indent: ...

  6. 解决 504 Gateway Time-out和502 Bad Gateway(nginx)

    504 Gateway Time-out 问题所在: 所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的fastcgi进程响应的缓 ...

  7. css各项水平居中

    当被设置元素为块状元素时用text-align:center就不起作用了,这也分两种情况,定宽块状元素和不定宽块状元素. 一.定宽块状元素:快状元素的宽度width为固定值,之后我们可以将左右marg ...

  8. Zookeeper会话

    Zookeeper会话的状态可以分为以下四种:CONNECTING,CONNECTED,CLOSED和NOT_CONNECTED.下图展示了会话的状态和状态之间的转移过程: 会话的初始状态为NOT_C ...

  9. Linux环境下解压超过4GB的zip文件

    今天在Linux服务器中解压一个zip的压缩包,提示如下错误信息: [root@appsrv01 ZIP_BCSA_COURSES]# unzip BCSA_MEDIAS_BAK_20161118.z ...

  10. Runtime 交换方法

    创建UIImage分类UIImage+Image.h #import<UIKit/UIKit.h> @interfaceUIImage (Image) + (__kindof UIImag ...