Inline videos and enable player controls for both Mac and iOS. Issue #1952

This commit is contained in:
Maurice Parker 2020-03-28 00:56:29 -05:00
parent 9a180bf083
commit 6d085fdacf
2 changed files with 11 additions and 11 deletions

View File

@ -45,6 +45,16 @@ function wrapTables() {
} }
} }
// Add the playsinline attribute to any HTML5 videos that don"t have it.
// Without this attribute videos may autoplay and take over the whole screen
// on an iphone when viewing an article.
function inlineVideos() {
document.querySelectorAll("video").forEach(element => {
element.setAttribute("playsinline", true)
element.setAttribute("controls", true)
});
}
// Remove some children (currently just spans) from pre elements to work around a strange clipping issue // Remove some children (currently just spans) from pre elements to work around a strange clipping issue
var ElementUnwrapper = { var ElementUnwrapper = {
unwrapSelector: "span", unwrapSelector: "span",
@ -120,6 +130,7 @@ function styleLocalFootnotes() {
function processPage() { function processPage() {
wrapFrames(); wrapFrames();
wrapTables(); wrapTables();
inlineVideos();
stripStyles(); stripStyles();
convertImgSrc(); convertImgSrc();
flattenPreElements(); flattenPreElements();

View File

@ -130,19 +130,8 @@ function showClickedImage() {
window.webkit.messageHandlers.imageWasShown.postMessage(""); window.webkit.messageHandlers.imageWasShown.postMessage("");
} }
// Add the playsinline attribute to any HTML5 videos that don"t have it.
// Without this attribute videos may autoplay and take over the whole screen
// on an iphone when viewing an article.
function inlineVideos() {
document.querySelectorAll("video").forEach(element => {
element.setAttribute("playsinline", true)
element.setAttribute("controls", true)
});
}
function postRenderProcessing() { function postRenderProcessing() {
ImageViewer.init(); ImageViewer.init();
inlineVideos();
} }
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {