项目需要在弹窗里展示rtmp视频流,使用了vue-video-player插件,在页面的话是可以自动播放的,但同样的代码放到elementUI的el-dialog标签中就不能自动播放了,试了些办法也没有解决,希望知道原因的大佬解答写,谢谢。相关代码<video-player ref="videoPlayer" :playsinline="true" class="vjs-custom-skin videoPlayer" :...
1、普通视频播放 npm install vue-video-player --save // 安装依赖 一般在PC端设置了autoplay属性都可以自动播放 <template><divclass="item physical-video"><divclass="player"><video-playerclass="vjs-custom-skin"ref="videoPlayer":options="playerOptions":playsinline="true"></video-player></div></...
开始确定错误类型选择不支持的格式播放器设置问题触摸事件限制资源访问问题使用MP4格式检查播放器设置手动触发播放确认HTTPS设置完成 代码示例 基本视频播放器设置 在Vue.js中,可以使用<video>标签来构建视频播放器,以下是一个简单的示例: <template><div><videoref="videoPlayer"controlsautoplay:src="videoSrc"@click="...
player } }, methods: { onClickLeft() { this.$router.history.go(-1); }, }, mounted() { // var player = new TcPlayer('id_test_video', { // //"m3u8": "http://192.168.0.98:10002/5594cc9a1742464eaefafcf0e27a0350/index.m3u8", //请替换成实际可用的播放地址 // "m3u8": "htt...
1、IOS在微信内video 不能自动播放问题 在Ios微信内部是可以实现video自动播放的 由于微信禁止了自动播放 换个思路解决自动播放问题 (亲测基本可以自动播放) html部分 1、 建议video 静音 muted 属性 <video:ref="`video${item.uuid}`"@touchstart.once="parentVideoPlay"muted autoplay="autoplay"playsinline="tru...
无法使用 默认playerOptions.autoplay = false; 在点击确认自动播放按钮之后,设置为playerOptions.autoplay = true; 这样会自动播放,但是不会跳转到特定位置,不知道原因, 于是使用this.player.play() 方法强行执行播放 完整代码 <video-player class="video-player vjs-custom-skin":playsinline="true":options="player...
项目进行时, 对视频模块需要进行组件开发,结合当前使用的开发框架是vuecli。 于是寻找到vue-video-player根据github上的文档进行开发,发现并不能实现播放功能,于是在网站上进行寻找发现,vue-video-player依赖于videojs 效果图 1、安装: npm install vue-video-player --save推流/m3u8 需要:npm install --save video...
let myPlayer=this.$video(myVideo, {//确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。controls:true,//自动播放属性,muted:静音播放//autoplay: "muted",autoplay:false,//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。preload: "...
'此视频暂无法播放,请稍后再试', controlBar: { timeDivider: false, durationDisplay: false }, flash: { hls: { withCredentials: false }}, html5: { hls: { withCredentials: false }}, poster: "/static/images/author.jpg", }, } }, components: { videoPlayer }, computed: { player() { re...