Живые обои в новой вкладке

lianaj · №1

пытаюсь сделать видео фоном "новой вкладки" для этого поковырялся в файле omni.ja по пути в котором находится новая вкладка (omni.ja\chrome\browser\res\activity-stream\prerendered\activity-stream.html) добавив туда фрагмент html5. однако firefox ни в какую не хочет отображать видео (и дело не в пути к видеофайлу) .но если просто открыть activity-stream.html в браузере то видео работает корректно. но тогда не подгружаются скрипты с миниатюрами вкладок. кто нибудь в курсе как это можно провернуть?(чтоб была новая вкладка как обычно но с видеофоном) :sick:

vending_machine · №2

lianaj пишет

как это можно провернуть?

Сделать из видео ~ gif. :iron:

lianaj · №3

vending_machine пишет

Сделать из видео ~ gif.

да это работает, но тогда нагрузка на систему будет достаточно высокой. а видео почти не грузит систему

Добавлено 19-06-2020 16:22:32

[решение] причина была в теге <meta content="default-src 'none';> из за этого видео и не подгружалось по прямой ссылке с сайта. А если нужно взять видео из локального файла на жестком диске нужно делать localhost сервер (я выбрал AHKhttp-master тк он совсем не грузит систему ) и брать видео с него ведь политика безопасности браузера не позволяет читать файлы html странице с жесткого диска если они запускаются не самим пользователем(в данном случае браузером).

вот собственно если кто хочет так сделать сам html (работает и без локалхоста (если он не сделан видео берется с сайта).

скрытый текст

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src resource: chrome:; connect-src https:; data: blob:; style-src 'unsafe-inline';">
<title data-l10n-id="newtab-page-title"></title>
<link rel="icon" type="image/png" href="chrome://branding/content/icon32.png"/>
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="browser/branding/brandings.ftl" />
<link rel="localization" href="browser/newtab/newtab.ftl" />
<link rel="stylesheet" href="chrome://browser/content/contentSearchUI.css" />
<link rel="stylesheet" href="resource://activity-stream/css/activity-stream.css" />
</head>
<body class="activity-stream">
<div id="header-asrouter-container" role="presentation"></div>
<div id="root"></div>
<div id="footer-asrouter-container" role="presentation"></div>
<script src="chrome://browser/content/contentSearchUI.js"></script>
<script src="chrome://browser/content/contentSearchHandoffUI.js"></script>
<script src="chrome://browser/content/contentTheme.js"></script>
<script src="resource://activity-stream/vendor/react.js"></script>
<script src="resource://activity-stream/vendor/react-dom.js"></script>
<script src="resource://activity-stream/vendor/prop-types.js"></script>
<script src="resource://activity-stream/vendor/redux.js"></script>
<script src="resource://activity-stream/vendor/react-redux.js"></script>
<script src="resource://activity-stream/vendor/react-transition-group.js"></script>
<script src="resource://activity-stream/data/content/activity-stream.bundle.js"></script>

<div id="video-bg">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto" poster="http://127.0.0.1:8000/poster" muted>
   
   <source src="http://127.0.0.1:8000/logo" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="https://idg.net.ua/blog/wp-content/uploads/daisy-stock-webm-video.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером.
   <a href="video/duel.mp4">Скачайте видео</a>.
</video>
</div>

.content {
position: absolute;
top: 40%;
font-family: 'Open Sans', sans-serif;
background-color: #FFE42C;
padding: 28px;
z-index: 999;
}

.content h1 {
font-size: 2em;
font-weight: 700;
}

.content p {
margin-top: 14px;
}

.content a {
color: #333;
}

/* ╨б╤В╨╕╨╗╨╕ ╨┤╨╗╤П ╨▓╨╕╨┤╨╡╨╛╤Д╨╛╨╜╨░ */

#video-bg {
z-index: -1!important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 1;
background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233;
background-size: cover;
}

#video-bg > video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

/* ╨Я╤А╨╛╨▓╨╡╤А╨║╨░ ╨╜╨░ ╨┐╨╛╨┤╨┤╨╡╤А╨╢╨║╤Г ╤Б╨▓╨╛╨╣╤Б╤В╨▓╨░ object-fit: */

@supports (object-fit: cover) {
#video-bg > video {
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}

/* ╨Ю╤В╨║╨╗╤О╤З╨╡╨╜╨╕╨╡ ╨▓╨╕╨┤╨╡╨╛ ╨┤╨╗╤П ╤Г╤Б╤В╤А╨╛╨╣╤Б╤В╨▓ ╤Б ╤А╨░╨╖╨╝╨╡╤А╨╛╨╝ ╤Н╨║╤А╨░╨╜╨░ ╨╝╨╡╨╜╨╡╨╡ 800px: */

@media screen and (max-device-width: 800px) {
#video-bg > video {
display: none;
}
}

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
</body>
</html>

его нужно через winrar заменить с тем что в файле omni.ja и будут у вас "живые обои в firefox"

проверено на ff 60

Отредактировано lianaj (23-06-2020 19:08:00)

VictorMerlin · №4

это для какой версии решение?

Полезная информация

№119-06-2020 15:52:30

Живые обои в новой вкладке

№219-06-2020 16:01:53

Re: Живые обои в новой вкладке

№319-06-2020 16:06:45

Re: Живые обои в новой вкладке

№415-10-2020 12:59:51

Re: Живые обои в новой вкладке

Board footer