首页 > 代码库 > 改变视频宽高比例
改变视频宽高比例
使用代码修改视频的原始宽高比
1 <h1>默认比例(640*360,16:9)</h1> 2 <video id="video1" src="../xinwsWebsite/video/seawavws.mp4" controls autoplay loop style="width: 300px;border: 1px solid red;"></video> 3 4 <h1>宽高比增大,高度变小(640*280,16:7)</h1> 5 <script type="text/javascript"> 6 var rotate2 = (Math.acos(280/360)*180/Math.PI).toFixed(2); // 新高度 / 旧高度 7 </script> 8 <video id="video2" src="../xinwsWebsite/video/seawavws.mp4" controls autoplay loop style="width: 300px;border: 1px solid red;"></video> 9 10 <h1>宽高比减小,高度增加(480*360,4:3)</h1>11 <script type="text/javascript">12 var rotate3 = (Math.acos(480/640)*180/Math.PI).toFixed(2); // 新宽度 / 旧宽度13 </script>14 <video id="video3" src="../xinwsWebsite/video/seawavws.mp4" controls autoplay loop style="width: 300px;border: 1px solid red;"></video>15 16 <script type="text/javascript">17 document.getElementById(‘video2‘).style.transform = ‘rotateX(‘+rotate2+‘deg)‘;18 document.getElementById(‘video3‘).style.transform = ‘rotateY(‘+rotate3+‘deg)‘;19 </script>
改变视频宽高比例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。