html视频---微信横竖屏

最新推荐文章于 2022-10-14 17:27:52 发布

mysilver

最新推荐文章于 2022-10-14 17:27:52 发布

阅读量1.6k

点赞数

本文介绍了一种视频播放页面的设计方案，通过HTML5的video标签实现视频播放，并提供了竖屏播放、横屏播放及自动旋转的功能。代码中包含了对不同屏幕尺寸的适应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="monicaqin">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>测试视频test</title>

</head>

<body>

<div>
<video id="test_video" src="movie/luyu.mp4" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" autoplay="" style="width: 1536px; height: 100%; display: block;"></video>
</div>

<div style="position:relative;top:-100px;">
       <input value="竖屏播放" onclick="portrait();" type="button">
       <input value="横屏播放" onclick="landscape();" type="button">
       <input value="跟随旋转" onclick="autoOrientation();" type="button">
</div>

<script type="text/javascript">
   test_video.style.width = screen.width + "px";
   test_video.style.height = "100%";
</script>


<div>
<canvas id="test">
</canvas></div>

<script type="text/javascript">
window.onresize=function(){
   //alert("haha");
   test_video.style.width = screen.width;
   test_video.style.height = screen.height;
}

test_video.addEventListener("timeupdate", function(){
   if(test_video.currentTime > 2)
   {
       test_video.style.display = 'block';
   }
});

function testPlay(){
   test_video.play();
}

window.onresize=function(){
   //alert("haha");
   test_video.style.width = screen.width;
   test_video.style.height = screen.height;
}

function portrait(){
   test_video.setAttribute("x5-video-orientation", "portrait");
}

function landscape(){
   test_video.setAttribute("x5-video-orientation", "landscape");
}

function autoOrientation(){
   test_video.setAttribute("x5-video-orientation", "landscape|portrait")
}
</script>

</body></html>

不写注释的都是仅作为个人笔记，不懂可以留言。