1，启用Ｈ5同层播放器： x5-video-player-type =“h5”

如果不对video进行其他设置，在播放视频时会出现以下效果：视频的上下都会有黑块

html5播放器切换 h5播放器怎么设置_ide


但是我们想要的效果是这样的：

html5播放器切换 h5播放器怎么设置_html5播放器切换_02

解决方法：
  1. 先看这个腾讯H5同层播放器接入规范文档。
  2. 注意看x5-video-player-type这个属性以及x5videoenterfullscreen、x5videoexitfullscreen这两个事件
  3. x5-video-player-type可以让视频播放的时候，视频上可以有其他元素，那么我们可以在视频播放的时候把视频作为整页面的背景其他元素放在视频之上。
  4. css中video的object-fit以及object-position可以将真正的视频放在容器该有的位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试微信视频</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        video {
            width: 100%;
            height: 211px;
        }
        video.android-full {
            position: relative;
            height: 100%;
            object-fit: contain;
            object-position: left 0 top 0;
        }
        video.android-full::-webkit-media-controls-enclosure {
            -webkit-appearance: none;
            position: absolute;
            top: 166px;
        }
        .desc.android-full {
            position: absolute;
            top: 211px;
        }
    </style>
</head>
<body>
    <video
        src="https://www.seastart.tv/introduce.mp4"
        x5-video-player-type="h5"
        playsinline
        webkit-playsinline
        controls></video>
    <p class='desc'>
        JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的解释型语言[4]。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言[5]，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
    </p>
    <script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js'></script>
    <script>
        var $video = $('video');
        var $desc = $('.desc');
        $video[0].addEventListener('x5videoenterfullscreen', function() {
            $video.addClass('android-full');
            $desc.addClass('android-full');
        });
        $video[0].addEventListener('x5videoexitfullscreen', function() {
            $video.removeClass('android-full');
            $desc.removeClass('android-full');
        });
    </script>
</body>
</html>

注：这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样

2，全屏播放： x5-video-player-fullscreen=”true”

视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){

  test_video.style.width = window.innerWidth + "px";

  test_video.style.height = window.innerHeight + "px";

}

3，控制横竖屏： x5-video-orientation

功能：声明播放器支持的方向

可选值： landscape 横屏, portraint竖屏

默认值：portraint

注： 此属性只在声明了x5-video-player-type=”h5”情况下生效

横屏：

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

竖屏：

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

跟随手机自动旋转：

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

4，进入/退出 全屏的事件：

进入全屏：

doucent.getElementByID("ID").addEventListener("x5videoenterfullscreen", function(){

  alert("player enterfullscreen");

})

退出全屏：

doucent.getElementByID("ID").addEventListener("x5videoexitfullscreen", function(){

  alert("player enterfullscreen");

})

5，视频显示位置控制：

默认视频在指定区域的居中显示，可以通过css object-position 属性控制视频(左上角) 显示位置

置顶：
js:

myVideo.style["object-position"]= "0px 0px"

html5播放器切换 h5播放器怎么设置_html5播放器切换_03

也可以在css中设置

底部显示：

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style[“object-position”]= “0px ” + offsetY + “px”

html5播放器切换 h5播放器怎么设置_html5播放器切换_04