如何解决HTML5微信播放全屏问题


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

*{

            padding: 0;

            margin: 0;

        }

    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}

    #videoALL{

  height: auto;

  position: absolute;

  width: 100%;

  top: 0;

  left: 0;

  object-fit: fill;

  display: block;

  background-size: cover;

  overflow: hidden;}

    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}

    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<script>

var videoALL = document.getElementById('videoALL'),

    videobox = document.getElementById('videobox'),

    btn = document.getElementById('btn'),

    videoend =  document.getElementById('videoend');

var clientWidth = document.documentElement.clientWidth;

var clientHeight = document.documentElement.clientHeight;

videoALL.style.width = clientWidth + 'px';

videoALL.style.height = 'auto';

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

function stylep(pId){

    pId.style.width = clientWidth + 'px';

    pId.style.height = clientHeight +200+ 'px';

}

stylep(videobox);

stylep(videoend);

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

function playcontr(){

    if (isAndroid) {

       videoALL.style.width = window.screen.width + 'px';

       videoALL.style.height = window.screen.height + 'px';

    }

    videobox.style.display = "block";

    videoALL.play();

    btn.style.display = "none";

    videoend.style.display = "none";

};

videoALL.addEventListener('pause',function(){ 

    videoALL.style.width = clientWidth + 'px';

    btn.style.display = "block";

}) 

videoALL.addEventListener("ended",function(){

    videoALL.pause();

    videobox.style.display = "none";

    videoend.style.display = "block";

});

</script>

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

微信小程序使用video组件播放视频功能示例

怎么用H5操作音频视频

html5开始播放当前的音频或视频的方法

以上就是如何解决HTML5微信播放全屏问题的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

HTML5新增标签有哪些

HTML5新增了哪些input类型及其属性?

HTML5 frameset标签的替代方案是什么?frameset标签替代的解决办法

h5的filereader怎样分布读取文件

css3如何实现元素环绕中心点布局(代码示例)

HTML5web本地存储实例详细说明

HTML5/css3 3d立方体旋转动画经典案例

canvas实现动态粒子连线效果(附代码)

使用h5实现输入框提示语和 正常文本框提示语的方法

如何使用HTML5 canvas绘制线条

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...