首页如何通过for循环生成2个video-js播放器

如何通过for循环生成2个video-js播放器

时间: 2024-06-04 22:10:39 浏览: 215

以下是一个示例代码，可以通过for循环生成2个video-js播放器： ```html <!DOCTYPE html> <html> <head> <title>生成2个video-js播放器</title> <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.15.4/video.js"></script> </head> <body> <div id="video-container"></div> <script> // 创建一个数组来存储视频的信息 const videos = [ { src: 'https://example.com/video1.mp4', poster: 'https://example.com/poster1.jpg', title: '视频1' }, { src: 'https://example.com/video2.mp4', poster: 'https://example.com/poster2.jpg', title: '视频2' } ]; // 创建一个for循环来生成2个video-js播放器 for (let i = 0; i < 2; i++) { const video = videos[i]; const videoElement = document.createElement('video'); videoElement.id = `video-${i+1}`; videoElement.className = 'video-js vjs-default-skin'; videoElement.controls = true; videoElement.preload = 'auto'; videoElement.poster = video.poster; videoElement.innerHTML = `<source src="${video.src}" type="video/mp4">`; const container = document.getElementById('video-container'); container.appendChild(videoElement); // 初始化video-js播放器 const player = videojs(`video-${i+1}`, { autoplay: false, controls: true, fluid: true, poster: video.poster, sources: [ { src: video.src, type: 'video/mp4' } ], title: video.title }); } </script> </body> </html> ``` 此代码将在页面上生成2个video-js播放器，每个播放器都有不同的视频源和海报。您可以根据需要更改视频信息。

阅读全文