zoukankan      html  css  js  c++  java
  • 改变视频宽高比例

    使用代码修改视频的原始宽高比

     1 <h1>默认比例(640*360,16:9)</h1>
     2 <video id="video1" src="../xinwsWebsite/video/seawavws.mp4" controls autoplay loop style=" 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=" 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=" 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>
  • 相关阅读:
    LINUX开发使用的3个远程工具
    NDK 链接第三方静态库的方法
    GMap.NET 显示GIF图标的定制
    从MySQL获取数据
    web2py远程开发
    升级后,使用dynamic报错
    实用的MVVM:ImageView
    node.js 连接 mysql
    vector常见用法
    XCODE中配置使用boost
  • 原文地址:https://www.cnblogs.com/gwcyulong/p/6380847.html
Copyright © 2011-2022 走看看