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

Question

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

function justplay(link, title){
var playerobj = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="mainflashplayer" width="640" height="360"><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 + '"** width="640" height="360" allowFullScreen="true" type="application/x-shockwave-flash" /></object>';
                document.getElementById('player').innerHTML = playerobj;
                document.getElementById('playcontenttitle').innerHTML = title;
}

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

Answer 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 width="320" height="240" 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>