View Single Post
Old 08-01-2021, 06:58 AM   #5
MicroDrie
Connoisseur
MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.MicroDrie ought to be getting tired of karma fortunes by now.
 
Posts: 58
Karma: 438844
Join Date: Aug 2019
Device: PC, Linux Mint, Tablet, and Telephone
Quote:
Has anyone done this?
Yes

Quote:
I read this: https://ebookflightdeck.com/handbook/media - Seems interesting.
Be aware that it are the rules for HTML5, while EPUB format is not completely the same. You can use it to change it to the following code:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>EPUB Video Example</title>

        <style>
            /* fixed-ratio-resize basic responsive class */
            .frr {
                max-width: 100%;
                height: auto;
                width: auto\9; /* IE8 */
            }
        </style>
    </head>

    <body>
	<p>This is a working EPUB video that could work in an EPUB reader</p>		
        <video id="video01" class="frr" controls="controls" autoplay="" poster="../Images/PosterCC.jpg">
            <!-- MP4 must be first for iPad! -->
            <source src="../Video/shared-culture.mp4" type="video/mp4" />
            <!-- Needed for EPUB reader -->
            <source src="../Video/shared-culture.webm" type="video/webm" />
            <!-- Will automatically add sub-titling button to controls -->
            <!-- Only vtt is supported -->
            <track label="Nederlands" kind="subtitles" srclang="nl" src="../Video/cc-en.vtt" />
            <track label="Frans" kind="subtitles" srclang="fr" src="../Video/cc-fr.vtt" />
            There is video content at this location that is not currently supported on your device. Please visit our website, <a href="http://www.example.com">www.example.com</a>, to watch the videos on your computer.
        </video>
        <p>You can refer in both the source and track elements to a web location.</p>
    </body>
</html>
Adapt the location for the video and subtitling files to your situation. This will work in:
  • Sigil preview screen;
  • PageEdit;
  • The free GitDen reader (tested on Android only)

So far, there are standard options. The big challenge arises when you want to embellish your video player with bells and whistles. After trying a dozen HTML5 examples, I can tell you that they all break in one way or another.

Let me know if this is enough or if you want more like me. I think I've found the difference between the HTML5 and EPUB standard and happen to be working on a solution today. Despite many searches on the Internet, I haven't actually found a working EPUB solution to adjust Video views in an EPUB.

Update: I forgot to mention that you can set the size of the video's width and height as a kind of maximum width and height on a large screen. Up to those dimensions, the frr class adjusts the width and height to the physical screen dimensions.

Last edited by MicroDrie; 08-01-2021 at 07:02 AM.
MicroDrie is offline   Reply With Quote