如果你在react中这么样写:
// Your code:
<div mycustomattribute="something" />
在react 15中将被渲染成:
// React 15 output:
<div />
在react 16及之后的版本中将被渲染成:
// React 16 output:
<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; }} />
);
}
}