文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
<video>
WARNING
Weex中内置的<video>
组件一般只做demo用途,在你的App中,你应该用你喜欢的视频库重新实现video组件。
Video 组件用于在页面中嵌入视频内容。
text
是唯一合法的子组件。
- src, string. 内嵌的视频指向的URL。
- play-status, string. 可选值为
play
|pause
,用来控制视频的播放状态,play
或者pause
,默认值是pause
。 - auto-play, boolean. 当页面加载初始化完成后,用来控制视频是否立即播放,默认值是
false
。 - poster, string, v0.18+ & iOS. 指定视频首图的图片链接。
- controls, string, v0.19+. 可选值为
controls
|nocontrols
,控制视频播放组件是否显示回放控制面板,默认会显示,当指定为nocontrols
时不显示回放控制面板。
- 通用样式 支持所有通用样式。
- start 当 playback 的状态是 Playing 时触发。
- pause 当 playback 的状态是 Paused 时触发。
- finish 当 playback 的状态是 Finished 时触发。
- fail 当 playback 状态是 Failed 时触发。
<template>
<div>
<video class="video" :src="src" autoplay controls
@start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
<text class="info">state: {{state}}</text>
</div>
</template>
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
.info {
margin-top: 40px;
font-size: 40px;
text-align: center;
}
</style>
<script>
export default {
data () {
return {
state: '----',
src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
}
},
methods:{
onstart (event) {
this.state = 'onstart'
},
onpause (event) {
this.state = 'onpause'
},
onfinish (event) {
this.state = 'onfinish'
},
onfail (event) {
this.state = 'onfinish'
}
}
}
</script>
Rax 示例
rax-video
是 <video>
组件的上层封装,抹平了 Web 和 Weex 的展现
import { createElement, Component, render } from "rax";
import Video from "rax-video";
import Driver from "driver-universal";
render(
<Video
style={{ width: '750rpx', height: '400rpx' }}
autoPlay
src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
/>,
document.body,
{ driver: Driver }
);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论