如何解决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 如何做到application cache?离线储存技术的简要说明

HTML5 canvas常用属性方法(介绍)

h5的web本地存储如何使用

关于HTML5中自定义属性的介绍

HTML5中转义实体字符,元数据, 跳转以及全局属性的图文详解

音乐播放器的制作实例(HTML5

HTML5实践-使用css实现弹性视频的代码分享

HTML5 audio标签怎么用?HTML5 自动播放实现代码实例

具体介绍HTML5-创建html文档

h5和css3制作一个相册的代码实例

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




打赏

取消

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

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

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

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

评论

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