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

Общайтесь со знакомыми и друзьями в нашей группе в Контакте.

№119-06-2020 15:52:30

lianaj
Участник
 
Группа: Members
Зарегистрирован: 10-06-2019
Сообщений: 5
UA: Firefox 73.0

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

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

Отсутствует

 

№219-06-2020 16:01:53

vending_machine
Участник
 
Группа: Members
Зарегистрирован: 10-01-2020
Сообщений: 522
UA: Firefox 77.0

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

lianaj пишет

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

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

Отсутствует

 

№319-06-2020 16:06:45

lianaj
Участник
 
Группа: Members
Зарегистрирован: 10-06-2019
Сообщений: 5
UA: Firefox 73.0

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

vending_machine пишет

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

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

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

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

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

скрытый текст
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   - You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; object-src 'none'; script-src resource: chrome:; connect-src https:; img-src https: data: blob:; style-src 'unsafe-inline';"> -->
<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="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> -->
       <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>


<style type="text/css">
/* ╨Ю╤Б╨╜╨╛╨▓╨╜╤Л╨╡ ╤Б╤В╨╕╨╗╨╕ */

.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)

Отсутствует

 

№415-10-2020 12:59:51

VictorMerlin
Забанен
 
Группа: Members
Зарегистрирован: 15-10-2020
Сообщений: 33
UA: Chrome 86.0

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

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

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]