HTML5 элемент видео и jQuery в скрипте содержимого расширения Chrome

Question

HTML5 элемент видео и jQuery в скрипте содержимого расширения Chrome

0

В консоли, если я использую: $("#player > video").videoWidth Я получаю результат: 1920 (или что-то еще).

Но в скрипте содержимого расширения Chrome, console.log($("#player-api video").videoWidth); дает результат undefined. Чтобы получить номер 1920 я должен использовать console.log($("#player-api video").get(0).videoWidth);

Точно так же на консоли я могу сделать:

video = $("#player > video")
video.style.width = "1920px"

И ширина стиля CSS изменится в элементе видео.

Код $("#player-api video").css("width", '"' + video_width + 'px"'); не работает из скрипта содержимого. Это странно, потому что $("#player-api video").css("zoom", "reset"). Так что что-то особенно странно с шириной и высотой стиля элемента. Мы можем видеть это, глядя дальше:

Из сценария содержимого я должен установить $("#player-api video").get(0).style.width = "1920px" или использовать video = $("#player-api video").get(0) и установите параметр video.style.width. Это связано с тем, что $("#player-api video") не имеет свойства стиля. Однако установка style.width из любого foo.get(0) не изменит стиль элемента.

Наконец, с консоли, если я пытаюсь напрямую использовать метод $("#player > video").width, я считаю, что это свойство (и оно не настроено ни на что). Установка этого свойства не влияет на стиль элемента, но оно, по крайней мере, есть. Но из скрипта содержимого это метод, который не влияет на элемент.

Почему HTML5VideoElement ведет себя так? Обычно элементы никогда не требуют использования .get(0) для проверки или управления.

И как изменить стиль элемента (ширину и высоту) элемента видео HTML5 из сценария содержимого расширения Chrome?

roberto tomás 28 нояб. 2013, в 20:06

Источник

Теги:

jquery

html5

video

google-chrome-extension

1 ответ

Ещё вопросы

roberto tomás · Accepted Answer · 2013-11-28T17-27-00.000Z

Я нашел ответ на половину моего вопроса.

var video = $("#player-api video").get(0);

for (method in video) { 1; } // ensure all methods are loaded up

var css = video.style.cssText;
video.style.cssText = css.replace(/width:\ \d+\S+/, "width: " + video.videoHeight + 'px;').replace(/height:\ \d+\S+/, "height: " + video.videoWidth + 'px;');

Изменит фактический стиль и наблюдаемую ширину и высоту видеоэлемента из сценария содержимого. Этого достаточно для моих нужд, но на самом деле не объясняет, что происходит.

Если кто-то приходит и отвечает, почему элемент видео .style.width может быть назначен из консоли, успешно меняя стиль элемента, но .style.width не может быть так назначено из сценария контента, я дам им ответ. В противном случае, я утверждаю это через два дня для решения .style.cssText я нашел при проверке объекта.