Блог

В настоящее время я пытаюсь внедрить видеоэлемент в свое приложение react. В начале должно быть изображение, и при наведении на него курсора должно воспроизводиться изображение. К сожалению, для iOS мое решение не будет работать.

Я попробовал несколько вещей, но видео не будет воспроизводиться, хотя я добавил «Автозапуск, воспроизведение в строке»

Чтобы мой вопрос не затянулся, я пока добавлю только одно из своих решений. Но я могу сказать, что я также пробовал это без элементов изображения и видео cloudinary, и результат был тот же

Здесь в одном из моих решений я использовал видео и элемент cloudinary изображения:

 ....

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