video.js在移动端播放视频，点击后全屏播放，在华为手机下是竖屏的，怎样让其为横屏全屏播放

Question

var myPlayer = videojs('my-video');
$(".detail-play-img").click(function() {
myPlayer.requestFullscreen();
myPlayer.play();
$(this).hide();
$(".detail-bg").hide();
});

以上是点击全屏播放的代码，在华为手机下是竖屏的全屏，还有在小米手机下没有全屏

使用swiper.js做的视频和图片的轮播，在小米和华为手机下，视频播放后不能轮播，下面是轮播的代码

var mySwiper3 = new Swiper('.swiper-container3', {

loop: false,
slidesPerView: 1,
nextButton: '#swiper-next3',
prevButton: '#swiper-prev3',
longSwipesRatio: 0.1,
pagination: '.swiper-pagination',
onTouchMove: function(swiper) {
myPlayer.pause();
//$(".detail-play-img").show();
//$(".detail-bg").show();
}

})

Answer 1

谢邀：这一块实践的比较少，只能说点建议：

1. 关于全屏的问题，全屏状态很多时候横屏还是竖屏都是由移动端决定的，无论是说移动浏览器还是移动端app，
2. 关于swipe视频播放的时候不能轮播，可以考虑在swipe提供的一些钩子函数中添加判断，【应该有滑动前执行的钩子函数】如果当前是视频的话，先暂停播放，再来轮播，只是个想法。
   没法具体帮助了。

Answer 2

全屏代码：

function launchFullScreen(element) {

            if(element.requestFullscreen) {
                element.requestFullscreen();
            } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if(element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if(element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }

滑动代码：
var mySwiper3 = new Swiper('.swiper-container3', {

            loop: false,
            slidesPerView: 1,
            nextButton: '#swiper-next3',
            prevButton: '#swiper-prev3',
            longSwipesRatio: 0.1,
            pagination: '.swiper-pagination',
            onTouchMove: function(swiper) {
                $("#my-video").get(0).pause();
                $("#my-video").hide();
                $(".detail-play-img").show();
                $(".detail-bg").show();
            }
        })