Найти все элементы видео и манипулировать источником src - PullRequest
Новая
       25

Найти все элементы видео и манипулировать источником src

0 голосов
/ 26 октября 2018

У меня есть сайт с несколькими элементами видео. Я должен добавить #t=0.1 к src="" каждого видео. 

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" class="seovid">
    <object>
        <video width="640" controls controlsList="nodownload">
            <source src="https://www.xzy/bla.mp4">
            Dein Browser unterstützt keine HTML5 Videos oder Du nutzt eine veraltete Version.
              </video>
    </object>
    <h3 itemprop="name“>bla</h3>
    <p itemprop="description“>bla</p>
</div>

Итак, я искал несколько часов, находя вещи, близкие к тому, что я ищу, но не работал для меня:

Jquery - как я могу получить значение src видео? Как получить тег видео src с помощью JavaScript? 

var vids = document.getElementsByTagName('video') 
// vids is an HTMLCollection
for( var i = 0; i < vids.length; i++ ){ 
    console.log( vids.item(i).src )
}

Так что getElementsByTagName - хорошее начало. Но как получить свойство src? И как манипулировать им, чтобы сохранить фактический путь к видео и просто добавить sth в конец?

Ответы [ 3 ]

0 голосов
/ 26 октября 2018

Из предоставленного вами кода src отсутствует в теге video.
Это атрибут источника тега.
Вы можете получить значение атрибута в javascript, используя getAttribute ('NameOfTheAttribute') .
Ниже приведен правильный JS 

var vids = document.getElementsByTagName('source') 
// vids is an HTMLCollection
for( var i = 0; i < vids.length; i++ ){ 
    console.log( vids.item(i).getAttribute('src') )
}

скрипка: https://jsfiddle.net/xldlx/yw4fzmk1/3/

0 голосов
/ 26 октября 2018 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" class="seovid">
     <object>
       <video width="640" controls controlsList="nodownload">
          <source src="https://www.xzy/bla.mp4">
    			Dein Browser unterstützt keine HTML5 Videos oder Du nutzt eine veraltete Version.
       </video>
       </object>
       <h3 itemprop="name“>bla</h3>
       <p itemprop="description“>bla</p>
    </div>
var vids = document.getElementsByTagName('video') 
// vids is an HTMLCollection
for( var i = 0; i < vids.length; i++ ){ 
   vids[i].children[0].setAttribute('src', vids[i].children[0].src+'#0.1');
}
0 голосов
/ 26 октября 2018

Итак, вы хотите добавить #t=0.1 к источнику.Вы можете получить элементы исходного тега с помощью getElementsByTagName('source), а затем получить атрибут src.

Ниже приведен код. 

var vids = document.getElementsByTagName('video') 
// vids is an HTMLCollection
for( var i = 0; i < vids.length; i++ ){ 
  //#t=0.1
   vids.item(i).getElementsByTagName('source')[i].src += "#t=0.1" ;
   console.log( vids.item(i).getElementsByTagName('source')[i].src);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" class="seovid">
	<object>
		<video width="640" controls controlsList="nodownload">
			<source src="https://www.xzy/bla.mp4">
			Dein Browser unterstützt keine HTML5 Videos oder Du nutzt eine veraltete Version.
      		  </video>
	</object>
	<h3 itemprop="name“>bla</h3>
	<p itemprop="description“>bla</p>
</div>
</body>
</html>
...