HTML 视频无法读取包含西里尔符号的本地视频文件。我该如何解决这个问题？

Question

我尝试在 html video 标签中播放本地视频文件，我使用打开对话框来选择文件并获取文件的路径。然后我把这条路径放在src中

export default function VideoContainer() {
  const { videoUrl } = useTypeSelector(state => state.video);
  console.log(videoUrl);

  return (
    <div className='VideoContainer'>
      {videoUrl !== '' && (
        <video className='VideoContainer__video' controls>
          <source src={`custom-protocol://${videoUrl}`} type={`video/mp4`} />
        </video>
      )}
    </div>
  );
} 

对于西里尔文文件，它不起作用。 error with cyrillic
我该如何解决这个问题？

我使用 Electron.js、React.js、Redux。

这是我尝试过的：

export default function VideoContainer() {
  const { videoUrl } = useTypeSelector(state => state.video);
  const newStr = decodeURI(videoUrl);
  console.log(newStr);

  return (
    <div className='VideoContainer'>
      {videoUrl !== '' && (
        <video className='VideoContainer__video' controls>
          <source src={`custom-protocol://${newStr}`} type={`video/mp4`} />
        </video>
      )}
    </div>
  );
}

但同样的error。

Answer 1

您可以通过decoding the URI 解决此问题，您将 videoURL 字符串作为函数输入传递。

在 Javascript 中，你可以像下面的例子那样做（通过 React / Electron / Redux 研究相同的代码结果）...

videoURL = ...some_Cyrillic_text_encoding_with_%_sign...

//# update the string with decoded version of itself
videoURL = decodeURI( videoURL ); //eg: gives шеллы as new URL

您可以看到它解决了与图片中显示的文本编码相同的问题：