如果在react中这么样写:
- // Your code:
- "something" />
在react 15中将被渲染成:
- // React 15 output:
在react 16及之后的版本中将被渲染成:
- // React 16 output:
- "something" />
但这个会有限制,如果自定义的属性不是 string
, number
或者 object
,该属性依然会被忽略。
所以目前可以这样添加 webkit-playsinline 属性:
- <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
另外,还可以通过 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; }} />
- );
- }
- }
-
相关阅读:
【算法自由之路】链表、栈、队列、递归、哈希表
8K HDR!|为 Chromium 实现 HEVC 硬解 - 原理/实测指南
.NET应用系统的国际化-整体设计思路
Sui发布RPC2.0 Beta,拥抱GraphQL并计划弃用JSON-RPC
自定义View的布局
Coovally模型探索:高效下载并使用Hugging Face Transformers预训练模型
Docker镜像下载慢/失败?Linux代理使用不便?想无Docker下载镜像?试试我这款开源项目吧
Springboot和Vue+MYSQL项目(基本介绍+前后端结合初步项目)+maven+mybatis
概率论得学习整理--番外3:二项式定理和 二项式系数
Git 入门&常用命令
-
原文地址:https://blog.csdn.net/zz130428/article/details/128199226