videojs 手机端全屏横屏播放

解决方案：

https://github.com/prateekrastogi/videojs-landscape-fullscreen

如图，videojs后引入

videojs-landscape-fullscreen.min.js

var player = videojs('some-player-id');

后加

player.landscapeFullscreen();

这样当点击全屏按钮后会自动横屏全屏

找了好久，记录分享一下。

参考代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><!--    <th:block th:include="include :: header('课件')"/>--><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><link href="/css/video-js.min.css" rel="stylesheet"><style>body {background-color: #191919;margin: 0px;padding: 0px;/*transform: rotate(90deg);*/}.m {width: 100%;height: 100%;margin: 0px;padding: 0px;}#my-video {margin: 0px;padding: 0px;}</style>
</head>
<body><div class="m"><video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="800"height="600"data-setup="{}"><source th:src="*{courseware.transformFilepath}" type="video/mp4"><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browserthat <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video><script src="/js/jquery.min.js"></script><script src="/js/video.min.js"></script><script src="/js/videojs-landscape-fullscreen.js"></script><script src="/js/videojs_zh-CN.js"></script><script th:inline="javascript">var myPlayer = videojs('my-video', {autoplay: true,controls: true,height: document.documentElement.clientHeight,width: document.documentElement.clientWidth}, function onPlayerReady() {this.on('timeupdate', function () {//播放时间改变// console.log("播放时间改变")});});myPlayer.landscapeFullscreen();videojs("my-video").ready(function () {var myPlayer = this;myPlayer.play();});</script>
</div></body>
</html>

videojs 手机端全屏横屏播放相关推荐

解决uni-app视频组件h5手机端全屏后无法横屏播放的问题
最近接到需求要做一个内嵌到手机游戏里的web视频播放器,一个视频列表加一个播放页面. 很简单,一会就做好了. 但是遇到了一个问题却困扰了很久,uni-app的video组件在手机端全屏播放视频时居然无 ...
jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图使用了swiper插件,可手动滑动切换也可自动切换效果图 css代码只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
android 全屏广告,手机端全屏广告展示问题
我最近在做一个手机端展示全屏广告的demo,广告素材的尺寸是320x480,是标准的全屏尺寸.我在屏幕小一点的手机可以全屏显示图片,但是针对一些大的屏幕就会最下面有一段是空白的.我想问下怎么设置可以让 ...
html手机端全屏显示和溢出问题
<meta name="viewport" content="width=1200, initial-scale=0.3"> initial-sca ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
android webview 横竖屏_webview播放视频并且点击全屏横屏的方法
title: webview播放视频并且点击全屏横屏的方法 date: 2016-11-28 10:33:27 tags: tips 首先initWebView,好吧有点多,有些是项目里其他需求需要的 ...
使用AVPlayer自定义支持全屏的播放器（二）
前言前段时间封装了一个视频播放器,由于时间匆忙,还有很多问题以及细节还没有来得及修改,最近挤了一点时间,将播放器完善了一下,具体思路请参考使用AVPlayer自定义支持全屏的播放器(一),本 ...
fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
Hbuilderx打包视频网站APP实现全屏横屏旋转的方法
这个问题很多人百思不得其解,这分享Hbuilderx封装视频网站APP的无法实现视频全屏横屏旋转功能. 1.我们在wapapp.js末尾加入代码既可完美实现全屏横屏旋转功能兼容IOS和安卓. 此方法适 ...

videojs 手机端全屏横屏播放

videojs 手机端全屏横屏播放相关推荐

最新文章

热门文章