播放html5视频黑屏,播放视频黑屏 · Issue #91 · surmon-china/vue-video-player · GitHub

视频源的问题,有的设备不支持html5,有的不支持flash

playerOptions: {

autoplay: false, // 自动播放

controls: true, // 是否显示控制栏

techOrder: ['flash', 'html5'], // 兼容顺序

sourceOrder: true, //

flash: { hls: { withCredentials: false } },

html5: { hls: { withCredentials: false } },

sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换

type: 'rtmp/mp4',

src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'

}, {

withCredentials: false,

type: 'application/x-mpegURL',

src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'

}],

poster: "/static/img/no_data.png", // 播放器默认图片

// controlBar: { // 配置控制栏

// timeDivider: false, // 时间分割线

// durationDisplay: false, // 总时间

// progressControl: true, // 进度条

// customControlSpacer: true, // 未知

// fullscreenToggle: true // 全屏

// },

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Vue-Video-Player播放Vue视频,首先确保已安装插件。按照以下步骤操作: 1. 安装插件: ```shell npm install vue-video-player --save ``` 2. 引入插件: - **全局引入**: ```javascript // 在main.js或者其他全局脚本中 import VueVideoPlayer from 'vue-video-player' Vue.use(VueVideoPlayer) ``` - **组件内引入**: ```javascript // 在需要使用video-player的组件文件中 import { videoPlayer } from 'vue-video-player' ``` 3. 在模板中使用VideoPlayer组件: ```html <template> <div> <video-player :options="playerOptions" ref="videoPlayer"></video-player> </div> </template> ``` 4. 配置播放器选项 (playerOptions): ```javascript data() { return { playerOptions: { // 这里可以设置视频源、播放控制、事件监听等选项 src: 'your-video-url', controls: true, muted: false, // 如果需要,默认静音 autoplay: false, // 是否自动播放,默认不自动 // 更多选项请参考官方文档:https://github.com/Collab-project/vue-video-player#options } } }, ``` 5. 监听播放事件和控制: ```javascript methods: { onPlay() { console.log('Video started playing'); }, onPause() { console.log('Video paused'); }, ... // 其他事件如ended、error等 }, ``` 6. 在组件内使用这些方法: ```javascript mounted() { this.$refs.videoPlayer.on('play', this.onPlay); this.$refs.videoPlayer.on('pause', this.onPause); }, beforeDestroy() { this.$refs.videoPlayer.off('play', this.onPlay); this.$refs.videoPlayer.off('pause', this.onPause); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值