如何向页面中添加视频
组件：
import Component from 'component'
class Video extends Component {
constructor(props) {
props = Object.assign({
_class: 'video-wrapper' + props.file_id,
}, props)
super(props)
this._init();
}
_resizeVideo() {
const {
file_id,
width,
height
} = this.state
var $video = $('.video-wrapper' + file_id + ' .video-box'),
re_w = $('.video-wrapper' + file_id).outerWidth(),
re_h = re_w / width * height
$video.css({
width: re_w + 'px',
height: re_h + 'px',
})
}
_init() {
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPod/i);
},
iPad: function() {
return navigator.userAgent.match(/iPad/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.iPad() || isMobile.Opera() || isMobile.Windows());
},
any_withoutiPad: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
}
var self = this
$(window).on('resize', function() {
self._resizeVideo()
})
}
callback() {
this._resizeVideo()
}
_html() {
const {
file_id,
width,
height
} = this.state;
return `
<iframe src="${window.location.origin}/cms/video.html?id=${file_id}&width=${width}&height=${height}" class="video-box"></iframe>
`
}
}
module.exports = Video
用法：
import Video from 'components/video'
require(['jquery'], function () {
var video1 = new Video({
file_id: '9031868223339260252',
width: 1240,
height: 1240,
})
var video2 = new Video({
file_id: '9031868223339260290',
width: 455,
height: 455,
})
video1.render('.video1')
video2.render('.video2')
})
