Video orientation using video.js

Question

is it possible to set the orientation a .mp4 file in the video.js player? I don't see properties to do so such as Orientation="Portrait", but I was wondering if setting the width and height at runtime would do this.

Answer 1

You should try out this plugin.

Video.js Zoom Rotate

A videoJS plugin to easily rotate or zoom in a video

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

Answer 2

Joe DF answer is the solution. However I struggled to get it working properly and so I decided to share the step by step of what worked for me.

OK, first I tried like hell to get the videojs.zoomrotate.js plugin working without using 'bower' but unfortunately there is no way of doing it so you will HAVE to use it. In my case I use Visual Studio and Visual Source Safe so npm, git, etc, are useless in my setup and that's why I didn't want to install such stuff. The good news is that you can uninstall everything after to get VideoJS and the rotate plugin working. Finally it's important to let you know that I did it from Windows 10.

Let's see how to do this:

1. Download and install 'Git'.

2. Download and install 'npm'.

3. Open the command prompt (cmd) and install 'bower' typing:

   npm install -g bower

Tip: If you got any error, just close your command prompt and open it again.

No worries, as I said you can uninstall everything later if you don't want to keep it.

Now we will install VideoJS. I already had it in my project but I choose to make everything from scratch to ensure it would work no problem. At this point I recommend you to CLOSE your command prompt and open it again to avoid get errors from npm.

4. Open command prompt and install VideoJS. Type:

   npm install --save video.js

5. At last install videojs.zoomrotate.js. Type:

   bower i --save videojs-rotatezoom

6. Now close your command prompt, open Windows Explorer. Navigate to c:\users\your_user_name\

7. You will see a new folder that was created by bower named bower_components. Enter it. You will find two subfolders in it, one for VideoJS and another for the plugin.

8. Enter video.js folder and then dist folder. You want only two files from there: 'video.js' and 'video-js.css'. Copy both to the folder in your application where you put your scripts.

9. Return to the bower_components folder and enter videojs-rotatezoom folder. Now enter the src folder. Copy the file 'videojs.zoomrotate.js' to your application scripts folder. Now you have everything you want.

10. You can uninstall npm and git and delete all left overs from the c:\users\your_user_name if you want, because you don't need it anymore.

Now it's time to put the videojs into your html file. Copy and paste this:

<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>

That's it! If you follow the steps correctly you should have it working by now. Just set the rotate and zoom attributes as you need.

Enjoy!

Answer 3

The best to fix this it to rotate the actual video file. You can do this by using VLC Player.

1. Go to Tools > Effects and Filters.
2. Click on Video Effects->Geometry.
3. Enable Transform and select Rotate by 90 degrees from the dropdown.

Other video libraries should rotate it too. (e.g. Windows Movie Maker)

the other option is to add this to your css

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

Note that this will transform your controls also however