如何通过JavaScript根据URL参数动态设置video标签src值

你原有代码存在两处需要修正的问题：

• document.getElementsByTagName("video") 返回的是元素集合，并非单个DOM节点，直接访问src属性会抛出错误，需要指定索引取对应视频元素
• 需要完整提取URL中?后的所有内容（包含特殊字符、#后的片段），和固定前缀拼接为最终视频地址

完整可运行代码 #

<video></video>
<script>
// 视频地址固定前缀
const BASE_VIDEO_URL = "https://areallylongaddress.com/videosourcefolder/";
// 提取URL中?后的全部内容，无?时默认取空字符串避免地址异常
const videoPath = window.location.href.split('?')[1] || '';
// 取页面第一个video标签设置src
document.getElementsByTagName('video')[0].src = BASE_VIDEO_URL + videoPath;
</script>

逻辑说明 #

• 用window.location.href.split('?')[1]提取后缀，而非window.location.search，可以完整保留?后携带的#等特殊字符，完全匹配规则要求：
  • 访问地址为https://website.com/player?@#$%时，最终src为https://areallylongaddress.com/videosourcefolder/@#$%
  • 访问地址为https://website.com/player?intro_video时，最终src为https://areallylongaddress.com/videosourcefolder/intro_video
• 后缀取值加了|| ''兜底，当URL没有携带?参数时，不会拼接出undefined导致地址失效
• 如果页面存在多个video标签，可修改getElementsByTagName('video')后的索引值，对应操作目标视频元素

内容的提问来源于stack exchange，提问作者gfr