React(HTML)视频标签无法在移动设备上自动播放 [英] React (HTML) video tag won't autoplay on mobile devices

问题描述

我创建了一个jsx变量，将视频嵌入到html中.每隔一个答案都说要包括静音，defaultMuted和playsinline(我已经有了).这些视频会在我的计算机上以safari，chrome和Firefox的格式自动播放，但无法在移动设备上播放.视频的开始屏幕已加载，但已暂停.我是否需要稍微做些不同，因为我可能正在使用React?

I created a jsx variable to embeds a video into my html. Every other answer says to include muted, defaultMuted, and playsinline (which I already have). The videos autoplay in safari, chrome and firefox on my computer, but not on mobile. The start screen of the video loads, but it is paused. Do I need to do it slightly differently because I'm using React maybe?

我在iOS 13.3上使用的是iPhone，自动播放功能无法在Safari，Chrome和Firefox中使用，而只能在移动设备上使用.这些视频全都是.mp4(.mov文件也不起作用).

I'm using an iPhone on iOS 13.3, the autoplay isn't working on safari, chrome and firefox, but only on mobile. The videos are all .mp4(.mov files also don't work).

var EmbedVideo = function(props) {
    return (
        <video webkit-playsinline playsinline autoplay="autoplay" className={props.className} muted defaultMuted loop>
            <source src={props.src} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    )
}

---

更新

因此，当我检查网站的html时，显然没有显示静音".节点看起来像这样.实际上确实缺少一些属性.

So apparently 'muted' doesn't show up when I inspect the html of my website. The node looks like this. There's a few attributes that are missing actually.

<video autoplay="" class="video" loop="">
<source src="/videos/my_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

我正在阅读有关静音属性的信息，该属性不适用于React ?有人制作了一个组件，该组件看起来像是视频标签，但是起了应有的作用(至少在我看来是像gif一样播放视频的情况下).我无法正常运行，甚至无法在桌面上自动播放.我正在尝试< VideoTag src = {props.src}/> ，因为我不知道他们的 poster 变量应该是什么.

I'm reading something about the muted attributed not working with React? Someone made a component that looks like it's the video tag, but functioning how it's supposed to(at least in my case with videos playing like gifs). I can't get it working though, it's not even autoplaying on Desktop. I'm trying just <VideoTag src={props.src} /> because I don't know what their poster variable is supposed to be.

推荐答案

使用React时， muted 似乎无法正常工作.为了使静音出现在组件中，我不得不使用一种叫做 dangerouslySetInnerHTML 的东西.

It looks like muted does not work properly when using React. I had to use something called dangerouslySetInnerHTML in order for muted to show up in the component.

var EmbedVideo = function(props) {
   return (
       <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${props.src}"
          class="${props.className}"
        />,
      ` }}></div>
   )
}

这篇关于React(HTML)视频标签无法在移动设备上自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！