如果在react中这么样写：
1. // Your code: 2. <div mycustomattribute="something" />
在react 15中将被渲染成：
1. // React 15 output: 2. <div />
在react 16及之后的版本中将被渲染成：
1. // React 16 output: 2. <div mycustomattribute="something" />
但这个会有限制，如果自定义的属性不是 string, number 或者 object，该属性依然会被忽略。
所以目前可以这样添加 webkit-playsinline 属性：
<video width="750" height="500" controls webkit-playsinline="true"> <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/> </video>
另外，还可以通过 setAttribute 进行设置，比如：
import * as React from 'react'; import { Component } from 'react'; export class VideoComponent extends Component { videoContainer: HTMLDivElement; componentDidMount() { const video = document.createElement('video'); video.autoplay = true; video.loop = true; video.muted = true; // fixes autoplay in chrome video.setAttribute('playsinline', 'true'); // fixes autoplay in webkit (ie. mobile safari) const source = document.createElement('source'); source.src = '/path/to/your/video.mp4'; source.type = 'video/mp4'; video.appendChild(source); this.videoContainer.appendChild(video); } render() { return ( <div ref={(ref) => { this.videoContainer = ref; }} /> ); } }
