Rendering MP4 along with an HTML5 Player?

More newbie questions… : (

In Camtasia, I’m able to output my final render as a folder containing the MP4 along with an associated HTML5 smartplayer:

Is there any way to do this in Shotcut? Preferably in some way that I can set it up in a template so another user doesn’t need to reconfigure things for every new video they render?

Shotcut itself does not do this. However, using an HTML player is simply a case of creating a simple HTML file which specifies the location of your mp4 file and opening that in a browser.

e.g. to use the popular AFTERGLOW player (http://afterglowplayer.com/) the HTML file would look like:

<!DOCTYPE html>
<html>
<head>
<title>afterglow player</title>
<script src=“//cdn.jsdelivr.net/npm/afterglowplayer@1.x”></script>
</head>
<body>
<video class=“afterglow” id=“myvideo” width=“1280” height=“720”>
<source type=“video/mp4” src=“/path/to/myvideo.mp4” />
</video>
</body>
</html>

See here for other players: 5 Open Source HTML5 Video Players for 2019 | by Manjunath M | Bits and Pieces

1 Like

Maybe I’m missing something here but, why would one want to open a video (locally) in a web browser?
There is vlc, wmp, qt and countless other dedicated video/media players.
It’s not like double clicking on a html file is any less work than double clicking on a mp4 file.

Also looking at the screen grab posted by the OP, there are other files required, like css, xml, js which all add unnecessary overhead.

Most media players also support more codecs and wrappers than what web browsers do.

If you really want to play it in a web browser, what is wrong with right click–>open with and selecting Chrome or Firefox or heaven forbid I.E.

2 Likes

There’s a complicated answer that I really don’t entirely understand myself. I’m a “video guy,” not a “server and HTML code” guy, but in a nutshell, I was told videos need to have an associated player due to some sort of preventing local saving and sharing with unauthorized viewers.

Apparently, there’s some sort of security layer happening where having the HTML player allows our internal archiving/sharing system to link to the player, not the video itself, which prevents the video from being saved locally and then shared… I really don’t understand how that works, and frankly the logic there seems pretty shaky, considering all the other ways to “save” videos without having the originating MP4 file… But I’m just following the rules as I’ve been told them.

In essence, they want to control who has access to the videos, and having that player somehow allows the system to do that… I don’t pretend to understand it, so much as I know that they’re currently producing these renders in Camtasia, which is outputting the MP4, HTML player, and all that other junk (which… again… I’m not an HTML guy, but it would seem that the other junk is a byproduct of the render and totally unnecessary).

Firefox has had a known bug for quite some time which results in inaccurate colors. It pisses me off that this bug hasn’t been fixed by now, so ix-nay to Firefox.

Stick with Chrome for video playback or even better, VLC.

1 Like

I hear you and totally agree, but hey, what ever makes their boat sail… :grinning:
Since SC does not automatically create the required html, you will need to do it manually which will be quite error prone.

One way that could make your life easier is to always export to a specific folder.
Then write a script that checks that folder for any new mp4’s and it automatically creates the required html and associated files to support it.
After each export or a batch of them, run the script.

Actually they are necessary for playing within the context of a web browser.
These other files contain the styling/skin of the player and the actual code of the player which will be in the sub directory called scripts.

The problem I see with the camtasia idea is:
If you export always to the same folder, how will the player handle the multiple mp4’s?
Does the existing html code get modified to allow the user to select one of several clips?
Or does it default to the last one, making the previous ones “un-watchable”?

If on the other hand you need to export to different folders every time, after a while you going to have duplicates of the same files all over the place.
Very messy and a complete waste of space.

Yeah… Camtasia outputs to a new folder every time… It duplicates the same files.

In a nutshell, I’m trying to use Shotcut as a free solution for others to do some simple video edits, thereby not requiring members of my team to devote time/resources editing their stuff. But for this to work, I need to make the process as smooth as possible, which means:

  • creating a simple template in Shotcut (done, with some invaluable help I’ve received in this forum)
  • writing some instructions for using Shotcut and that template (mostly done)
  • figuring out a way to enable users to publish/render the video in a usable format once they’ve edited (and… this is my problem, since they seem to require us needing a player)

If there’s a free, secure solution for dropping an MP4 into some sort of thingamjig which automatically spits out the player with associated files, that would be ideal. But it needs to be simple, since I’m already pushing the boundaries of what I’m asking these people to do…

I’m assuming that it’s all done in a “closed” environment, i.e. same editors and a bunch of users/viewers which are also part of a group.

Why not just use a private Youtube channel?
You have your editors, they all export to a single folder, then one person is tasked with uploading these clips to the Youtube channel, say once, twice a day or as often as required.
Only the users/viewers that have been invited have access to these clips.

Problem solved, all clips only available via a web browser.

Use firefox.

This topic was automatically closed after 90 days. New replies are no longer allowed.