Question

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

Answer 1

你应该尝试这个插件。

Video.js缩放旋转

可轻松旋转或放大视频的videoJS插件

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

Answer 2

最好解决此问题，以旋转实际的视频文件。您可以使用VLC播放器来完成此操作。

转到工具＆gt;效果和过滤器。
点击视频效果 - ＆gt;几何。
启用变换并从下拉列表中选择“旋转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);
}

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

Answer 3

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

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

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

下载并安装“Git”。
下载并安装“npm”。
打开命令提示符 (cmd) 并安装“bower”，输入：

npm install -g bower

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

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

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

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

npm install --save video.js
最后安装videojs.zoomrotate.js。类型：

bower i --save videojs-rotatezoom
现在关闭命令提示符，打开 Windows 资源管理器。导航到 c:\users\your_user_name\
您将看到一个由 bower 创建的名为 bower_components 的新文件夹。输入它。您会在其中找到两个子文件夹，一个用于 VideoJS，另一个用于插件。
输入 video.js 文件夹，然后输入 dist 文件夹。您只需要那里的两个文件：“video.js”和“video-js.css”。将两者复制到应用程序中放置脚本的文件夹中。
返回bower_components文件夹并进入videojs-rotatezoom文件夹。现在进入 src 文件夹。将文件“videojs.zoomrotate.js”复制到您的应用程序脚本文件夹。现在你拥有了你想要的一切。
如果需要，您可以卸载 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>

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

享受吧！

使用video.js进行视频定位

3 个答案: