将 javascript 变量传递给 html5 视频标签，使用它作为播放器的 src

Posted 2023-02-16

【中文标题】将 javascript 变量传递给 html5 视频标签，使用它作为播放器的 src

【英文标题】：passing javascript variables to html5 video tag using it as src for the player

【发布时间】：2017-03-15 22:27:41

【问题描述】：

我正在尝试将使用 Flash 视频播放器的网页转换为 html5 <video> 标签。此页面使用JS代码读取文件的链接，将其传递给flash player trought flashvars，代码是这样的

function justplay(link, title)
var playerobj = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="mainflashplayer"  ><param name="allowFullScreen" value="true" />       <param name="flashvars" value="file=' + link + '" />        <param name="wmode" value="direct" />   <param name="movie" value="' + playerurl + '" /><param name="AllowScriptAccess" value="always"><embed name="mainflashplayer" src="' + playerurl + '" AllowScriptAccess="always" wmode="direct" **flashvars="file=' + link + '"**   allowFullScreen="true" type="application/x-shockwave-flash" /></object>';
                document.getElementById('player').innerHTML = playerobj;
                document.getElementById('playcontenttitle').innerHTML = title;

所以，我尝试将file=' + link + ' 传递给<video> 标记，将其用作源代码。我可以通过哪种方式做到这一点？

【问题讨论】：

在更一般的视图中。在 Flash 视频播放器中使用了一个名为 link 的变量。我只想用基于 html5 的播放器替换 flash 播放器，所以使用链接变量作为新播放器的源

【参考方案1】：

我不完全确定你想要什么，但如果你想使用 html 视频标签，那么你可以使用以下内容来完成你想要的。

$(function() 
  justPlay('http://clips.vorwaerts-gmbh.de/VfE_html5.mp4', 'My video');
);
    
function justPlay(link, title)
  document.getElementById('player').setAttribute('src',link);
  document.getElementById('playcontenttitle').innerHTML = title;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="playcontenttitle"></p>
<video   controls id="player">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

【讨论】：

我尝试做的第一个想法就是这个` ` 但它不起作用

你能给我链接吗？