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

Question

我有一个包含多个视频元素的网站。我必须将每个视频的 #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 添加到末尾？

Answer 1

因此，您想将 #t=0.1 附加到源。可以通过getElementsByTagName('source)获取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>

Answer 2

从您提供的代码来看，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') )
}

fiddle: https://jsfiddle.net/xldlx/yw4fzmk1/3/

Answer 3

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><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>

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

Find all video elements and manipulate source src

html

javascript

video

src