React 使用 HTML5 视频标签 controlsList 属性

Posted 2023-05-08

【中文标题】React 使用 HTML5 视频标签 controlsList 属性

【英文标题】：React use of HTML5 video tag controlsList attribute

【发布时间】：2017-11-20 15:24:33

【问题描述】：

试图用 React 组件返回这个元素：<video ... controls controlsList="nodownload" /> 并且下载按钮仍然出现。

没有办法用 React 传递这个参数（controlsList）吗？

也试过htmlControlsList=

错误日志： 标签上的未知道具controlsList。从元素中移除这个道具。有关详细信息，请参阅 ....URL

【问题讨论】：

你能分享一个sn-p吗？

return (<video src=item.video_url poster=item.photo_url key=item.attachment_id className="project-item" controls controlsList="nodownload"></video>); 我试过这个。显然反应忽略了这个属性，并且没有关于它的文档。

也许还有其他方法可以访问由 React 呈现的元素属性？

与此同时，您可以创建对视频 ref=(v)=>this.video=v 的引用，然后在 componentDidMount 中使用普通 JS this.video.setAttribute("controlsList","nodownload"); 添加它

【参考方案1】：

直到问题在 React 中得到解决，这是添加属性的方法

componentDidMount() 
  this.video.setAttribute("controlsList","nodownload");


render() 
  return (
    <video 
      ref=(v)=>this.video=v
      src="myvideo.mp4" 
      controls 
      autoplay />
  )

【参考方案2】：

对 ControlsList API has been reported a couple of weeks ago 和相关 PR 的支持刚刚在 5 天前合并。

它应该可以在即将发布的 React 版本之一中使用。