Hi I am using this library: vue-vimeo-player
I have my code like this:
<div class="col-12">
<vimeo-player ref="player" :options="{ responsive: true }" :portrait="true" :autoplay="true" :video-id="videoID" #ready="onReady"></vimeo-player>
</div>
methods: {
onReady() {
this.playerReady = true
},
play () {
this.$refs.player.play()
},
pause () {
this.$refs.player.pause()
},
I added portrait to true and it does not do anything I do understand why? how can I fix it= Thanks!
Related
I'm using NUXT / Vue along with brightcove video player which has worked for me in the past with very few issues. I noticed today that my videos are playing but have NO SOUND in ie11. The videos work fine in every other browser I tested excpet ie11.
I do not see any errors in ie11 but there is a few warnings that I am not familiar with that I'm hoping have something to do with the no sound and can give me some direction for a solution:
VIDEOJS: WARN: Invalid playlist STREAM-INF detected. Missing BANDWITH attribute
VIDEOJS: WARN: player.dash() is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.hls is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.vhs is deprecated. Use player.tech().vhs instead
<template>
<div id="video-component">
<div class="container--content__full-width-mobile">
<div class="video-headline font--primary font--bold">
<slot name="videoHeadline"></slot>
</div>
<div
class="container--video-player"
:class="{ 'container--video-player__inline': videoInline }"
>
<div ref="playerElement" :id="playerId" class="video-player"></div>
<div v-if="hasTranscript" class="transcript-accordion bg--primary">
<div
class="accordion"
:key="accordion"
v-for="(row, accordion) in accordionRows"
>
<div
class="accordion-title"
v-on:click="
row.open = !row.open;
rotateIcon = !rotateIcon;
"
>
<div class="l-accordion-title">
<p>Reveal Video Transcript</p>
<i
class="fas fa-chevron-down transition-fast"
:class="{ rotateIcon }"
aria-hidden="true"
></i>
</div>
<!-- /.l-accordion-title -->
</div>
<div class="accordion-content" v-if="row.open">
<slot name="videoTranscript"></slot>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import video from "~/mixins/video/videos.js";
export default {
name: "VideoPlaylist",
mixins: [video],
props: {
videoInline: {
type: Boolean,
required: false,
default: false
},
videoId: {
type: String,
required: true
},
hasTranscript: {
type: Boolean,
required: false
},
autoPlay: {
type: Boolean,
required: false,
default: true
}
},
data() {
return {
accordionRows: {
videoTranscript: {
open: false
}
},
rotateIcon: false
};
},
computed: {
playerId() {
return `videoPlayer_${this._uid}`;
}
},
mounted() {
this.$nextTick(() => {
this.$brightcovePlayerLoader({
refNode: `#${this.playerId}`,
accountId: "2272822669001",
playerId: "DMcAHJ5QL",
embedId: "default",
videoId: this.videoId,
options: {
aspectRatio: "16:9",
autoplay: this.autoPlay
}
}).then(data => {
console.log(`[VideoPlayer.vue] init player.then data:`);
console.log(data);
});
});
this.stopVideo();
}
};
</script>
Get that error when try to get stream from any HLS source.
I tried to add videojs-contrib-hls lib , but its dont help.
Maybe should i try some other player, and what player will properly work with hls sources?
<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import videojs from 'video.js'
window.videojs = videojs
export default {
components: {
videoPlayer
},
data () {
return {
playerOptions: {
height: '700',
width: '1820',
controls: true,
sourceOrder: true,
hls: true,
sources: [{
// type: "video/mp4",
type: "application/x-mpegURL",
// src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
src: "http://127.0.0.1:8081/live/93UEctBmn/index.m3u8",
withCredentials: false,
}],
autoplay: false,
},
techOrder: ['html5'],
html5: { hls: { withCredentials: false } },
contentData: {}
}
},
mounted() {
this.$store.dispatch("content/getById", this.$route.params.contentId).then(
(res) => {
// this.message = data.message;
// this.snackbar = true;
if(res.data.error){
console.log(res.data.error);
return;
}
this.contentData = Array.isArray(res.data) ? res.data[0] : res.data;
},
(error) => {
// this.message = error.response.data.message || error;
// this.snackbar = true;
console.log(error)
}
);
}
}
</script>
<template>
<div class="content">
<div class="content-player">
<video-player class="vjs-custom-skin videoPlayer" :options="playerOptions" ></video-player>
</div>
<div class="content-info">
<div class="content-info_title">
{{contentData.streamTitle || 'loading'}}
</div>
</div>
<v-divider></v-divider>
<div class="content-author">
<div class="content-author_avatar">
<v-avatar
size="56"
>
<v-img
:src="'https://diploma-rtmp-bucket.s3.eu-central-1.amazonaws.com/'+contentData.author[0]._id || ''"
></v-img>
</v-avatar>
</div>
<div class="content-author_name">
{{contentData.author[0].username || 'undefined username'}}
</div>
</div>
</div>
</template>
Here is my page code. Can it be becouse of some CORS troubles?. I run it player on local machine
I used another player vue-vjs-hls. On this player hls work good, dont now why hls source not works at vue-video-player and video.js. What strange becouse vue-vjs-hls use video.js as core.
ideally I need vue awesome swiper to init on product card hover, so until the user hovers, catalog loads only one img per product instead of multiple.
HTML
<div
#mouseover="handleMouseOver"
#mouseleave="handleMouseLeave"
/>
<div
v-if="media.length > 1"
ref="swiper"
v-swiper:mySwiper="swiperOption"
>
<div class="swiper-wrapper">
<div
v-for="image in images"
:key="image.id"
class="swiper-slide image__wrapper"
>
<img
:src="image.attributes.src"
:width="imgWidth"
:height="imgHeight"
:alt="imgAlt"
>
</div>
</div>
</div>
</div>
Component
data: () => ({
swiperOption: {
loop: true,
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 30,
},
}),
methods: {
slideStart() {
if (this.$refs.swiper) {
this.mySwiper.activeIndex = 2;
this.mySwiper.autoplay.start();
}
},
slideStop() {
if (this.$refs.swiper) {
this.mySwiper.autoplay.stop();
this.mySwiper.activeIndex = 1;
}
},
handleMouseOver() {
this.isHovered = true;
this.slideStart();
},
handleMouseLeave() {
this.isHovered = false;
this.slideStop();
},
},
What I've tried and what problems encountered:
At first, I've added isHovered condition to v-if and used element in v-else, however after hover swiper refuses to autoplay (but reacts on activeIndex change)
After that I've tried adding init:false to swiperOption and this.$mySwiper.init() on hover, but it crashes whenever I'm trying to leave the page:
Would appreciate any ideas.
Solved by creating a parent div, and moving 'v-if' logic with hover condition there.
I'm looking to run a function when the state changes in my Vue app.
In my component I'm able to get the boolean state of isOpen. I'm looking to run a function that adds focus to my form input when the modal opens and isOpen is set to true. I've tried using a watcher but with no luck. I'm opening my modal by calling :class="{ 'is-open': search.isOpen }" in the html and showing it via css. Any help would be most appreciated.
data() {
return {
isFocussed: this.$store.state.search,
//checks the state of isOpen?
}
},
computed: {
search() { return this.$store.state.search },
},
watch: {
isFocussed() {
this.formfocus()
},
},
methods: {
formfocus() {
document.getElementById('search').focus()
},
please check my snippet which shows the good way to work in Vue.js, you can work with refs which is very helpful instead of document.getElementById()
new Vue({
el: '#app',
data: {
isOpen: false,
},
computed: {
},
watch: {
isOpen(){
if(this.isOpen){
this.$nextTick( function () {
this.formfocus();
}
);
}
}
},
methods: {
formfocus(){
this.$refs.search.focus();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
<button v-on:click="isOpen = !isOpen">show modal</button>
<div v-if="isOpen">
<input ref="search" type="text" placeholder="search">
</div>
</div>
EDIT: i have added a conditional if on the watch, i hope this solves the problem
I am not sure what your template looks like but here is how I set focus on a conditional element.
element
<input type="text" class="search-input" v-model="search" :class="{'collapsed-search': hideInput}" placeholder="Enter keyword" ref="search">
notice the ref="search" on the input.
here is the method when the input condition is true
toggleSearch() {
this.hideInput = !this.hideInput
this.search = ''
setTimeout(() => {
this.$refs.search.focus()
}, 1000)
}
this.$refs.search.focus() is called after the element has been fully created which is the purpose of the setTimeout
I'm trying to develop a website where i can switch camera from chrome in mobile devices. Current im using vuejs 2 framework and using MediaDevices.getUserMedia() to take image. From here i understand how am i gonna use my code. Individually both of front and back camera working. But where im trying to switch between then its not working. Here is my code:
<template>
<div class="container" id="scanIdCardPage">
<div class="scanIdCardDiv">
<div class="scanCardContainer" v-show="afterTakingPhoto">
<video ref="video" id="video" :style="{width: divWidth}" autoplay></video>
<canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas>
</div>
</div>
</div>
<div class="takePhotoBtnDiv">
<div>
<button type="button" class="btn btn-info" #click="camera('environment')">Back Camera</button>
<button type="button" class="btn btn-info" #click="camera('user')">front Camera</button>
</div>
</div>
</div>
</template>
export default {
data() {
video: {},
front: true
},
methods: {
Camera() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: (this.front? "user" : "environment") }}).then(stream => {
this.video.src = window.URL.createObjectURL(stream);
this.video.play();
});
}
},
changeCamera() {
this.front = !this.front;
}
},
mounted() {
this.Camera();
}
}
Can anyone help me out how do i change the camera? TIA
I got my solution. MediaDevices.getUserMedia() can't directly change video facingMode. First you have to stop the running video stream. And then change the video facingMode. Here is my code:
export default() {
data() {
},
methods: {
camera(face) {
this.stop();
this.gum(face);
},
stop() {
return video.srcObject && video.srcObject.getTracks().map(t => t.stop());
},
gum(face) {
if(face === 'user') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: face}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
if(face === 'environment') {
return navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: face}}})
.then(stream => {
video.srcObject = stream;
this.localstream = stream;
});
}
}
},
mounted() {
this.camera('environment');
},
}