使用 video.js 的视频方向

Question

是否可以在 video.js 播放器中设置 .mp4 文件的方向？我没有看到诸如 Orientation="Portrait" 之类的属性，但我想知道在运行时设置宽度和高度是否会这样做。

Answer 1

你应该试试这个插件。

Video.js 缩放旋转

一个 videoJS 插件，可以轻松旋转或放大视频

https://github.com/xbgmsharp/videojs-rotatezoom

Answer 2

Joe DF 答案就是解决方案。然而，我努力让它正常工作，所以我决定一步一步分享对我有用的东西。

好的，首先我想尽办法让 videojs.zoomrotate.js 插件在不使用 'bower' 的情况下工作，但不幸的是没有办法做到这一点，所以你必须使用它。就我而言，我使用 Visual Studio 和 Visual Source Safe，因此 npm、git 等在我的设置中毫无用处，这就是我不想安装这些东西的原因。好消息是您可以在之后卸载所有内容以使 VideoJS 和旋转插件正常工作。最后，重要的是要让您知道我是从 Windows 10 完成的。

让我们看看如何做到这一点：

1. 下载并安装“Git”。

2. 下载并安装“npm”。

3. 打开命令提示符 (cmd) 并安装 'bower' 输入：

   npm install -g bower

提示：如果出现任何错误，只需关闭命令提示符并重新打开即可。

不用担心，正如我所说，如果您不想保留它，您可以稍后将其卸载。

现在我们将安装 VideoJS。我已经在我的项目中使用了它，但我选择从头开始制作所有东西，以确保它不会出现问题。此时我建议您关闭命令提示符并再次打开它以避免从 npm 得到错误。

4. 打开命令提示符并安装 VideoJS。类型：

   npm install --save video.js

5. 最后安装 videojs.zoomrotate.js。类型：

   bower i --save videojs-rotatezoom

6. 现在关闭命令提示符，打开 Windows 资源管理器。导航到c:\users\your_user_name\

7. 您将看到由 bower 创建的名为 bower_components 的新文件夹。输入它。您会在其中找到两个子文件夹，一个用于 VideoJS，另一个用于插件。

8. 输入video.js 文件夹，然后输入dist 文件夹。您只需要两个文件：“video.js”和“video-js.css”。将两者复制到应用程序中放置脚本的文件夹中。

9. 返回bower_components文件夹，进入videojs-rotatezoom文件夹。现在输入src 文件夹。将文件“videojs.zoomrotate.js”复制到您的应用程序脚本文件夹。现在你拥有你想要的一切。

10. 如果需要，您可以卸载 npm 和 git 并删除 c:\users\your_user_name 中的所有剩余部分，因为您不再需要它了。

现在是时候将 videojs 放入您的 html 文件中了。复制并粘贴：

<link href="/your_script_folder/video-js.css" rel="stylesheet" />
<script src='/your_script_folder/video.js'></script>
<script src='/your_script_folder/videojs.zoomrotate.js'></script>

<div id="divVideo" class="video">
    <video id="my-video" class="video-js" controls="" preload="auto" style="width:800px;height:600px;" >
        <source src="yourvideo.mp4" type='video/mp4' controls='false' />
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
                  
    <script>
    var my_video_id = videojs('my-video');
    my_video_id.zoomrotate({
        rotate: 90,
        zoom: 1.5
    });
    </script>
</div>

就是这样！如果您正确地按照步骤操作，您现在应该可以正常工作了。只需根据需要设置旋转和缩放属性即可。

享受吧！

Answer 3

最好解决这个问题以旋转实际的视频文件。您可以使用 VLC Player 来做到这一点。

1. 转到工具 > 效果和滤镜。
2. 点击视频效果->几何。
3. 启用变换并从下拉列表中选择旋转 90 度。

其他视频库也应该旋转它。 （例如 Windows Movie Maker）

另一种选择是将其添加到您的 css 中

video{
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

请注意，这也会改变您的控件