查找所有视频元素并操作源 src答案

【问题标题】：Find all video elements and manipulate source src查找所有视频元素并操作源 src
【发布时间】：2018-10-29 20:46:14
【问题描述】：

我有一个包含多个视频元素的网站。我必须将#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 - how i can get the video src value? How to get video tag src using 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？

【问题讨论】：

标签： javascript html video src

【解决方案1】：

因此，您想将#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>

【讨论】：

【解决方案2】：



    <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');
}

【讨论】：

【解决方案3】：

从您提供的代码来看，src 不在视频标签上。
这是标签来源的一个属性。
您可以使用 getAttribute('NameOfTheAttribute') 在 javascript 中获取属性的值。
下面是正确的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/

【讨论】：