React Cloudinary Video无法在iOS中播放

编程问答 2022-07-22

问题描述

我目前尝试在我的react应用程序中实现视频元素。 它应该是一开始的图像，并且当您将鼠标悬停在其上时，它应该播放该图像。 不幸的是，对于iOS，我的解决方案无法正常工作。

我尝试了几件事，但是在添加了“ autoplay，playsinline”之后，它无法播放视频

为了使我的问题不久，我现在仅添加我的解决方案之一。 但是我可以说，我也尝试了没有云图像和视频元素的情况，并且结果相同

这是我使用视频和图像云元素的一种解决方案： 

....

handleMouseEnter = () => {
    this.setState({
      image: `${this.props.image}_mp4`,disabled: true,})
  };

handleMouseLeave = () => {
    this.setState({
      image: `${this.props.image}_image`,disabled: false,})
  };

render() {
  return(
    <Card className="mobile-project-card" text="white" onMouSEOver={this.handleMouseEnter} onMouSEOut={this.handleMouseLeave}>
      <Image hidden={this.state.disabled} className="card-img " cloudName={process.env.REACT_APP_CLOUDINARY_CLOUDNAME} publicId={`${this.props.image}_image`} alt={`${this.props.name} image`}>
        <Transformation quality="auto" fetchFormat="auto" width="450" crop="scale" />
      </Image>
      <Video ref={this.vidRef} hidden={!this.state.disabled} className="card-img" cloudName={process.env.REACT_APP_CLOUDINARY_CLOUDNAME} publicId={`${this.props.image}_mp4`} alt={`${this.props.name} image`} playsInline muted loop autoplay >
        <Transformation quality="auto" fetchFormat="auto"/>
      </Video>

....

希望有人可以告诉我所缺少的内容。 如果您需要更多说明，请告诉我

解决方法

您是否尝试仅使用<Video>元素？我的建议如下-省略<Image>元素，仅使用（隐藏的）<Video>元素，并将海报图像设置为所需图像。然后，使用onMouseEnter属性播放视频-

<Video ref={this.vidRef} 
  className="card-img" 
  cloudName={process.env.REACT_APP_CLOUDINARY_CLOUDNAME} 
  publicId={`${this.props.image}_mp4`} 
  alt={`${this.props.name} image`} 
  muted loop 
  poster="https://res.cloudinary.com/demo/image/upload/sample.jpg" //url of the desired image
  onMouseEnter={ event => event.target.play() }
  onMouseLeave={ event => event.target.pause() }
  >
  <Transformation quality="auto" fetchFormat="auto"/>
</Video>

您可以将其用作参考- https://stackblitz.com/edit/cloudinary-react-video-poster?file=index.js

cloudinarygifgifreactjsreactjsreactjsreactjsvideovideo