javascript - 全屏上的 HTML5 视频使用 jquery / javascript 像在移动设备中的 youtube 上一样旋转屏幕?
问题描述
我有一个 html5 自定义视频播放器,现在我想点击移动设备上的全屏图标将屏幕旋转为横向,反之亦然,就像在 youtube 中一样。
这是我的 HTML
<div id="video-block">
<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
<source src="INPUT VIDEO URL HERE"/>
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
View Fullscreen!
</button>
</div>
这里是js
$(document).ready(function() {
// rotate function
function rotateVideoPlayer() {
var width = $(window).width();
var height = $(window).height();
$("#video-block").width(0);
$("#video-block").height(0);
console.log(width, height);
// document.body.scrollTop = document.documentElement.scrollTop = 0
if (width > height) {
console.log("landscape");
$("#video-block").width(width);
$("#video-block").height(width * 9 / 16);
$("#video-block").css("left", 0 + "px");
$("#video-block").removeClass("rotated");
} else {
console.log("portrait");
$("#video-block").width(height);
$("#video-block").height(height * 9 / 16);
$("#video-block").css("left", width - (width - height * 9 / 16) / 2 + "px");
$("#video-block").addClass("rotated");
document.body.scrollTop = document.documentElement.scrollTop = 0
}
}
$('#btn').on('click', function(){
rotateVideoPlayer();
var element = document.getElementById('videocontainer');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
})
});
css
#video-block.rotated{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
不幸的是,我的解决方案没有按预期工作,有一个全屏但旋转不能像在 youtube 上那样正常工作。
有人可以帮我解决这个问题吗?任何帮助或建议将不胜感激
解决方案
进入全屏模式后,您可以使用screen.orientation.lock('landscape')
启用。landscape
它仅适用于安卓。
由于 iOS 在启用全屏模式方面存在一些限制,因此最好像 youtube 一样在 iOS 上对视频使用默认行为。
$(function() {
function makeLandscape() {
// this works on android, not iOS
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('landscape');
}
}
$(document).on('click', '#btn', function() {
var element = document.getElementById('video-container');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
makeLandscape();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
makeLandscape();
}
});
});
<div id="video-container">
<video class="video_player" id="player" width="100%" autoplay="autoplay" playsinline="">
<source src="https://wp-iframe.videomill.co/vpaidexamples/videos//vmerce.mp4" />
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button id="btn">
View Fullscreen!
</button>
</div>
推荐阅读
- java - 有没有更好的方法从数组中获取值?
- mysql - MySQL 服务器正在运行但我无法连接:ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
- python-3.x - 为 WritetoFiles 设置文件名
- python - 将 csv 文件作为 pandas 数据框导入,我遇到了语法错误
- azure-data-factory - Azure 数据工厂将数据流映射到 CSV 接收器导致零字节文件
- html - 为什么在html中预览和打印时pdf会有所不同
- pyspark - 在 AWS Glue ETL 作业中删除选定的日期分区
- java - SpringBoot 2 Migration from 1.5 Dependencies 错误
- node.js - 在服务器上找不到模块“../models/user”Node.js
- c++ - 使用 stoi 函数处理异常