使用javascript读取视频路径_Javascript_Asp.net Mvc

使用javascript读取视频路径

javascript asp.net-mvc

使用javascript读取视频路径,javascript,asp.net-mvc,Javascript,Asp.net Mvc,如何使用javascript读取视频路径并将其传递给html源值。目前，我正在使用硬编码从我的html阅读视频，我希望它是动态的javascript。以下是我从项目中的内容文件夹临时加载的内容： <video id="video" controls preload="metadata" style="width:100%; height:100%"> <source src="~/Content/Videos/Sample_Vid.mp4" type="video/

如何使用javascript读取视频路径并将其传递给html源值。目前，我正在使用硬编码从我的html阅读视频，我希望它是动态的javascript。以下是我从项目中的内容文件夹临时加载的内容：

<video id="video" controls preload="metadata" style="width:100%; height:100%">
      <source src="~/Content/Videos/Sample_Vid.mp4" type="video/mp4">                                     
</video>

如果我正确理解您的问题，您可以：

实现如下所示的函数，如

setVideoSource（）

，该函数允许您设置/更改页面中已存在的视频元素的源，或者

实现如下所示的类似于

addVideo（）

的函数，该函数允许您使用自己选择的源向页面动态创建/添加新的视频元素

有关这两个功能如何工作的详细信息，请参阅以下文档：

/*
更新文档中与选择器匹配的第一个视频的源
*/
函数setVideoSource（选择器，src）{
const元素=document.querySelector（选择器）；
/* 
继续之前，请检查元素是否为视频
*/
if（element.nodeName==='VIDEO'）{
/* 
如果元素是视频，请删除所有源子元素（如果存在）
*/
for（元素的常量源。querySelectorAll（'source'））{
元素。removeChild（源代码）；
}
/* 
创建一个新的源元素并用src填充它
属性
*/
const source=document.createElement（'source'）；
source.setAttribute（'src'，src）；
/*
将源元素添加到我们正在更新的视频中
*/
元素。追加子元素（源）；
}
}
/*
将新视频添加到与parentSelector匹配的第一个元素下的文档中
*/
函数addVideo（父选择器、src、宽度、高度）{
const parent=document.querySelector（parentSelector）；
/* 
继续之前，请检查父级是否存在
*/
如果（家长）{
/* 
创建新的视频元素
*/
const video=document.createElement（'video'）；
video.setAttribute（'controls'，true）；
如果（宽度）{
video.setAttribute（'width'，width）；
}
如果（高度）{
video.setAttribute（'height'，height）；
}
/* 
创建一个新的源元素并用src填充它
属性
*/
const source=document.createElement（'source'）；
source.setAttribute（'src'，src）；
/*
将源元素添加到我们插入并添加的视频
将视频元素转换为文档元素
*/
视频。追加子项（来源）；
父、子（视频）；
}
}
//更新现有视频的来源
setVideoSource（“#视频”，”https://www.w3schools.com/html/mov_bbb.mp4')
//向页面添加新视频
添加视频（“#父项”，”https://www.w3schools.com/html/mov_bbb.mp4'、'100%'、'150px'）

使用JavaScript动态更新现有视频
使用JavaScript动态添加到页面的新视频