videojs vue 静态source_手把手从零开始封装一个vue移动端视频播放器组件ios播放视频时自动全屏如何取消
时间: 2024-01-24 10:02:35 浏览: 36
在 Video.js 中取消 iOS 播放器自动全屏,可以使用 `playsinline` 属性。该属性告诉 iOS 在原生的 Safari 浏览器中播放视频时不要自动全屏。
在 Vue 组件中,你可以将 `playsinline` 传递给 `video-js` 组件的 `options` 属性,如下所示:
```vue
<template>
<div>
<video-js ref="videoPlayer" class="vjs-custom-skin" :options="playerOptions" />
</div>
</template>
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default {
name: 'VideoPlayer',
props: {
source: {
type: String,
required: true,
},
},
data() {
return {
player: null,
playerOptions: {
autoplay: false,
sources: [{
src: this.source,
type: 'video/mp4',
}],
controls: true,
fluid: true,
playsinline: true, // 取消 iOS 自动全屏
},
};
},
mounted() {
this.initPlayer();
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
},
methods: {
initPlayer() {
this.player = videojs(this.$refs.videoPlayer, this.playerOptions, function onPlayerReady() {
console.log('Player is ready');
});
},
},
};
</script>
```
在上面的示例中,我们将 `playsinline` 设置为 `true`,以便在 iOS 上播放时取消自动全屏。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)