Quote:
Originally Posted by eroica20
I’ve played around with embedding video in epub3 format before, but ran into a lot of compatibility headaches. Some apps like Apple Books worked okay, but on other platforms the video just showed up as a missing file or a blank space. I wanted to include video for an instructional ebook, but honestly, it felt like every device and reader had its own quirks. Even if the file size was small, getting that video to play everywhere was rough.
|
Do the try with the following code (maybe one of the two methods works in your ereader):
1) In your xhtml file:
Code:
<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="sound">
<audio controls="controls" src="../Audio/Track18.mp3" class="sound"></audio>
</div></foreignObject>
<foreignObject x="0" y="80" width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="full">
<video controls="" src="../Video/screencast.mp4" class="full"></video>
</div></foreignObject></svg>
</div>
<div class="center">
<div class="inblock">
<audio class="sound" controls="controls" src="../Audio/Track18.mp3">Track18</audio>
<div style="width: 100%; margin: 0 auto;">
<video controls="controls" style="width: 100%" src="../Video/screencast.mp4">If you read this, then your ereader doesn't support video.</video>
</div>
</div>
</div>
</body>
and in your css file:
Code:
.center {
text-align: center;
}
.inblock {
display: inline-block;
width: 100%;
margin: 1em 0;
}
.sound {
width: 100%;
margin-bottom: 1em;
}
.full {
width: 100%;
height: auto;
}
As you can see, one method is based on a svg wrapper plus the use of the foreinObject tag; this is a nice method because with it, you can adjust the viewport with the resolution of the video. But both methods work fine under Sigil, Calibre, Thorium, Lithium, Reasily, Infinity Reader and Cantook; there are issues under PocketBook. Forget Google Play Books, there epub3 doesn't work.