在Google Chrome控制台添加视频问题：非自有网站中本地桌面视频无法显示的原因排查

Hey there! Let's tackle your two questions step by step—starting with the frustrating video display issue you're facing, since that's where you're stuck right now.

Adding videos directly via the Chrome console is straightforward. You have two main options depending on your needs:

• Option 1: Inject raw HTML (quick and simple)
  Open the Console tab (F12 or Ctrl+Shift+I), then paste this code (replace the src with your video URL):

  document.body.insertAdjacentHTML('beforeend', `
    <div class="wrapper">
      <video width="320" height="240" controls>
        <source src="https://your-video-url-here.mp4" type="video/mp4">
      </video>
    </div>
  `);
  

• Option 2: Create elements programmatically (more flexible)
  If you want more control over the elements, use JavaScript to build them from scratch:

  // Create the wrapper div
  const wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  
  // Create the video element
  const video = document.createElement('video');
  video.width = 320;
  video.height = 240;
  video.controls = true;
  
  // Create the source tag
  const source = document.createElement('source');
  source.src = 'https://your-video-url-here.mp4';
  source.type = 'video/mp4';
  
  // Assemble and add to the page
  video.appendChild(source);
  wrapper.appendChild(video);
  document.body.appendChild(wrapper);
  

Your hunch about the path is partially right—but the real issue is browser security restrictions. When you're on a remote website (served over HTTP/HTTPS), browsers block direct access to your local file system (like ../FR-V2.mp4 pointing to your desktop) to prevent unauthorized access to your files. Here are two solutions:

Solution 1: Use the FileReader API (Safe & Recommended) #

This method lets you manually select your local video file, bypassing security restrictions safely. Run this code in the console:

// Set up the video wrapper and element
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';

const video = document.createElement('video');
video.width = 320;
video.height = 240;
video.controls = true;

// Create a hidden file picker input
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'video/mp4';
fileInput.style.display = 'none';

// Load the selected file into the video
fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    const fileURL = URL.createObjectURL(selectedFile);
    video.src = fileURL;
    wrapper.appendChild(video);
    document.body.appendChild(wrapper);
  }
});

// Add the input to the page and trigger the file picker
document.body.appendChild(fileInput);
fileInput.click();

When you run this, a file picker will pop up—just select FR-V2.mp4 from your desktop, and the video will load correctly.

Solution 2: Allow Chrome to Access Local Files (Testing Only) #

If you need to test local files frequently with remote sites, you can launch Chrome with a flag that disables this security rule. Warning: This is unsafe for regular browsing—only use this for testing.

• Close all Chrome windows first
• Open your terminal/command prompt and run:
  • Windows: chrome.exe --allow-file-access-from-files
  • Mac: open -a "Google Chrome" --args --allow-file-access-from-files
  • Linux: google-chrome --allow-file-access-from-files
• Then, use the full local file path in your video source (e.g., file:///C:/Users/YourName/Desktop/FR-V2.mp4 for Windows, file:///Users/YourName/Desktop/FR-V2.mp4 for Mac)

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