使用JavaScript从链接数组添加HTML视频无法播放问题求助

Hey there! Let's dig into why your videos are only showing thumbnails instead of playing—super common issue when setting up HTML5 video with JavaScript, so don't worry, we'll get it sorted.

First, let's break down the most likely culprits and fix them one by one:

1. Validate Your Video Source Link & Format #

• Double-check the full URL: The truncated link you shared (https://github.com/alla...) looks incomplete. Make sure you're using the full, direct link to the video file. If it's hosted on GitHub, remember you need the raw file URL (click the "Raw" button on the file page) instead of the regular repository page link—GitHub's repo pages are webpages, not playable video sources.
• Confirm browser support: Stick to widely supported formats like MP4 (H.264 encoded) for maximum compatibility. Browsers can't play formats they don't recognize, so this is a frequent hangup.

2. Add the Critical type Attribute to <source> Tags #

Most of the time, videos won't play if the browser can't identify their format. You need to add a type property to your source objects, then assign it to the <source> element in your JavaScript. This tells the browser exactly what kind of video it's dealing with.

3. Verify Your JavaScript Element Creation #

Make sure you're properly building the HTML5 video element structure. Here's a complete, working example based on your data:

<!DOCTYPE html>
<html>
<head>
    <title>School Assignment Video Player</title>
</head>
<body>
    <!-- Container to hold our video element -->
    <div id="video-wrapper"></div>

    <script>
        // Your video data (updated with type attribute)
        const video = { 
            controls: true, 
            width: 320, 
            height: 240, 
            source: [ 
                {src: "https://your-full-video-url-here.mp4", type: "video/mp4"} 
            ] 
        };

        // Create the <video> element
        const videoEl = document.createElement('video');
        videoEl.controls = video.controls;
        videoEl.width = video.width;
        videoEl.height = video.height;

        // Add each source to the video element
        video.source.forEach(source => {
            const sourceEl = document.createElement('source');
            sourceEl.src = source.src;
            sourceEl.type = source.type; // This line is crucial!
            videoEl.appendChild(sourceEl);
        });

        // Attach the video to the page
        document.getElementById('video-wrapper').appendChild(videoEl);
    </script>
</body>
</html>

4. Check for Browser Console Errors #

Open your browser's developer tools (F12 or Ctrl+Shift+I) and head to the Console tab. Look for errors like:

• 404 Not Found: Means your video URL is wrong or the file doesn't exist.
• CORS errors: If the video is hosted on another domain, the server might not allow cross-origin requests. You may need to use a different host or adjust CORS settings (if you control the server).

Give these steps a shot—chances are one of them will fix the playback issue. If you still run into problems, share the full video URL and any console errors you see, and we can dive deeper!

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