html video 修改视频方向

要旋转或翻转HTML video的方向，可以通过CSS的transform属性来实现。下面是一个示例代码：

<style>
    .rotate90 {
        transform: rotate(90deg);
    }
    .rotate180 {
        transform: rotate(180deg);
    }
    .rotate270 {
        transform: rotate(270deg);
    }
    .flipX {
        transform: scaleX(-1);
    }
    .flipY {
        transform: scaleY(-1);
    }
</style>
<video id="myVideo" src="video.mp4"></video>
<script>
    var video = document.getElementById("myVideo");
    video.addEventListener("loadedmetadata", function() {
        // 获取视频原始宽高
        var videoWidth = this.videoWidth;
        var videoHeight = this.videoHeight;
        if (videoWidth > videoHeight) {
            // 如果视频宽大于高，则旋转90度
            this.classList.add("rotate90");
        } else {
            // 如果视频宽小于等于高，则不旋转
            this.classList.remove("rotate90");
        }
        // 可以使用其他CSS transform属性来实现翻转等效果
        //this.classList.add("flipX");
        //this.classList.add("flipY");
    });
</script>

在这个示例中，我们使用CSS的transform属性来实现旋转和翻转。首先，在CSS中定义了几个类来实现旋转和翻转，然后在JS中，我们在视频元素的loadedmetadata事件中获取视频的原始宽高，并根据宽高比来判断是否需要旋转，并添加相应的类。如果需要翻转，则可以添加其他的transform类来实现。