использование видео тега внутри элемента SVG приводит к странной ошибке - PullRequest
Новая
       9

использование видео тега внутри элемента SVG приводит к странной ошибке

0 голосов
/ 28 февраля 2020

Я пытаюсь использовать тот же код, который используется в этом ответе , но вместо этого я получаю сообщение об ошибке в журнале консоли:

Код 

<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"  style="border: 1px solid black;">
    <g>
        <g transform="translate(151,104) scale(1,1)">
            <rect x="0" y="0" width="300" height="200"></rect>
            <foreignObject x="-151" y="-104" width="500" height="400">
                <video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
                    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                </video>
            </foreignObject>
        </g>
    </g>
</svg>

Результат журнала консоли: 

vendor.js:25623 Uncaught Error: Template parse errors:
Unexpected closing tag ":svg:video". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("       <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        [ERROR ->]</video>
      </foreignObject>
    </g>
"): ng:///SharedModule/SignControllerComponent.html@9:8
Unexpected closing tag ":svg:foreignObject". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("rc="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
      [ERROR ->]</foreignObject>
    </g>
  </g>
"): ng:///SharedModule/SignControllerComponent.html@10:6
Unexpected closing tag ":svg:g". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        </video>
      </foreignObject>
    [ERROR ->]</g>
  </g>
</svg>"): ng:///SharedModule/SignControllerComponent.html@11:4
Unexpected closing tag ":svg:g". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
      </foreignObject>
    </g>
  [ERROR ->]</g>
</svg>"): ng:///SharedModule/SignControllerComponent.html@12:2
Unexpected closing tag ":svg:svg". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
    </g>
  </g>
[ERROR ->]</svg>"): ng:///SharedModule/SignControllerComponent.html@13:0
    at syntaxError (vendor.js:25623)
    at DirectiveNormalizer._preparseLoadedTemplate (vendor.js:41134)
    at vendor.js:41125
    at Object.then (vendor.js:25614)
    at DirectiveNormalizer._preParseTemplate (vendor.js:41125)
    at DirectiveNormalizer.normalizeTemplate (vendor.js:41112)
    at CompileMetadataResolver.loadDirectiveMetadata (vendor.js:43270)
    at vendor.js:49279
    at Array.forEach (<anonymous>)
    at vendor.js:49278

Если я скопирую код и вставлю его, используя инструменты разработчика (F12), все работает, и видео играет хорошо. мне нужно что-то добавить в код или в мое приложение, чтобы Angular мог хорошо построить элемент?

это моя angular версия: 


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.20
Node: 12.13.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.20
@angular-devkit/build-angular     0.803.20
@angular-devkit/build-optimizer   0.803.20
@angular-devkit/build-webpack     0.803.20
@angular-devkit/core              8.3.20
@angular-devkit/schematics        8.3.20
@angular/cdk                      8.2.3
@angular/cli                      8.3.20
@angular/http                     7.2.15
@ngtools/webpack                  8.3.20
@schematics/angular               8.3.20
@schematics/update                0.803.20
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2
...