这样,你就成功地在Vue2项目中使用了vue-video-player插件,并实现了基本的视频播放功能。
npm install vue-video-player --save 2.配置插件 :在 main.js 中全局配置插件 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 3. 在自己新建的Vue组件中使用如下代码, 新建的组件video.vue ...
然后通过videojs将视频加载到video标签中。 以下是一个简单的Vue组件示例,可以在其中使用videojs播放本地.mp4文件。 <template> <div> <video ref="videoPlayer" class="video-js"></video> </div> </template> <script> import videojs from "video.js" import "video.js/dist/video-js.css" export def...
poster:'',//封面autoplay:false,//自动播放属性,muted:false,// 静音播放preload:'auto',//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。fluid:true} } }// js 使用importVideojsfrom'video.js'import'video.js/dist/video-js.css'this.$nextTick(() =>{Videojs(this.$refs.videoPlayerRef...
video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放,也就是不是全zhi屏播放的video标签的一个属性 video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西 ...
this.player.loadByUrl(video.source) this.playingVideo = video }, createDemoPlayer(source, cover) { if (document.getElementById('player-con') === null) { const playerDomWrap = this.$refs.playerTemp const playerDom = document.createElement('div') playerDom.setAttribute('id', 'player-con'...
=== video.VideoId) { return } this.player.loadByUrl(video.source) this.playingVideo = video }, createDemoPlayer(source, cover) { if (document.getElementById('player-con') === null) { const playerDomWrap = this.$refs.playerTemp const playerDom = document.cre...
<easy-player v-if="show" alt="" style="width: 400px; height: 500px;" id="hisplayer" ref="hisplayer" decodeType="auto" :videoUrl="videoUrl" :videoName="videoName" class="video-player" :hasAudio="false" :hasVideo="true" @error="restartHisPlayer" @ended="restartHisPlayer"> </eas...
解决思路:直接iframe等方式内嵌HTML写法的播放器即可。 示例代码 修改皮肤 https://help.aliyun.com/zh/vod/developer-reference/advanced-features-3?userCode=pqofinu5&type=copy&spm=a2c4g.11186623.0.0.1aca45b00c97JN#p-y12-l70-189 额外 https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/H5...
3、在自己新建的Vue组件中使用如下代码, 新建的组件明video-dplayer.vue(这里使用局部引入) <template> <divclass="about"> <d-player ref="player" id="player" :options="options"></d-player> </div> </template> <script>importVue from "vue";importVueDPlayer from "vue-dplayer";import"vue-dplaye...