Question

我正在尝试在轮播中添加视频，但无法正确添加。我已经尝试了HTML5视频标记，但是它不起作用。我也使用过iframe，但不能满足我的要求，有人可以告诉我如何在轮播中实现视频而不是图像

import React, { Component } from "react";
import { Carousel } from "react-bootstrap";
class Slider extends Component {
  render() {
    return (
      <>
       <Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      style={{width:"400px",height:"400px"}}
      src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pf-mu6-ake6324-chim-l.jpg?w=800&dpr=1&fit=default&crop=default&auto=format&fm=pjpg&q=75&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=7edc252958c9c6b9cea5379443d6ac46"
      alt="First slide"
    />

  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      style={{width:"400px",height:"400px"}}
      src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pf-mu6-ake6324-chim-l.jpg?w=800&dpr=1&fit=default&crop=default&auto=format&fm=pjpg&q=75&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=7edc252958c9c6b9cea5379443d6ac46"
      alt="Third slide"
    />


  </Carousel.Item>
  <Carousel.Item>
   <video style ={{width:"400px",height:"400px"}}>
       <source src="https://youtu.be/r0DYJzN00B4" type="video/mp4"></source>
   </video>


  </Carousel.Item>
</Carousel>
      </>
    );
  }
}

export default Slider;

Answer 1

尝试为父div分配视频标签，并检查其是否有效。

 <div className="video-section">
 <video style ={{width:"400px",height:"400px"}}>
       <source src="https://youtu.be/r0DYJzN00B4" type="video/mp4"></source>
   </video>
</div>

Answer 2

为视频标签添加控件属性。

<Carousel>
                    <Carousel.Item>
                        <video style={{height:360,width:'100%'}} controls>
                            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" 
type="video/mp4"></source>
                            Sorry, your browser doesn't support videos.
                        </video>
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
</Carousel>

如何使用react-bootstrap在轮播中添加视频？

2 个答案: