Im having issues getting a video player to render on a next.js app.
const HeroVideo = () => {
return (
<div>
<video>
<source src="./public/Untitled.mp4" type="video/mp4" />
</video>
</div>
);
};
export default HeroVideo;
Is it necessary to host my video on a server such as youtube?..
Related
The youtube-player icon appears on the screen, but the video does not play and an error with the video playback ID is displayed
<template>
<div class="container">
<YouTube url="https://youtu.be/GQmO52f26Ws" />
</div>
</template>
<script setup>
import YouTube from 'vue3-youtube'
</script>
vue3-youtube use src as source url and play video on ready state from video id.
You can replace your code with this format and get video in frame.
<template>
<YouTube
src="https://www.youtube.com/watch?v=jNQXAC9IVRw"
#ready="onReady"
ref="youtube"
/>
</template>
<script>
import { defineComponent } from 'vue'
import YouTube from 'vue3-youtube'
export default defineComponent({
components: { YouTube },
methods: {
onReady() {
this.$refs.youtube.playVideo()
},
},
})
</script>
I have a Vue.js app and I want to use capacitor camera preview plugin.
But when I run the app on web I get this error on the console
Also it does not work in IOS as well.
Here is the documentation of the plugin
https://github.com/capacitor-community/camera-preview#readme
Here is my component
<template>
<div>
</div>
</template>
<script>
import '#capacitor-community/camera-preview'
import { CameraPreview } from '#capacitor-community/camera-preview';
const cameraPreviewOptions = {
position: 'rear',
height: 1920,
width: 1080
};
export default {
created() {
CameraPreview.start(cameraPreviewOptions);
}
}
</script>
I added id="cameraPreview" and my problem is fixed
<template>
<div id="cameraPreview">
</div>
</template>
I am trying to lazy load images using Javascript and when I run a server using parcel I can only see the images when the tag is assigned a src. But when I assign a data-src to the tag to implement the lazy loading, the images on the parcel server never show up. My JavaScript code is correct, I think there is a problem with parcel, anyone know how to fix this?
Here is my html and JS code:
<div class="photo__container photo__container--one">
<img
data-src="portrait/1-vertical.jpeg"
alt="image"
class="fade-in-img img-vertical-lazy"
/>
<img
data-src="portrait/2-vertical.jpeg"
alt="image"
class="fade-in-img img-vertical-lazy"
/>
<img
data-src="portrait/3-vertical.jpeg"
alt="image"
class="fade-in-img img-vertical-lazy"
/>
</div>
JS code:
//lazy-loading
const lazyImages = document.querySelectorAll('.img-vertical-lazy');
const appearLazy = {
threshold: 0.1
};
const lazyLoading = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
entry.target.src = entry.target.getAttribute('data-src');
lazyLoading.unobserve(entry.target);
});
}, appearLazy);
JS code:
lazyImages.forEach(image => lazyLoading.observe(image));
I need to load an SVG file into a Vue template. It must be loaded in such a way that I can access the internal classes with js and css, so presumably I'm looking for an <object> tag and not an <img> tag.
The SVG is located on an external server, not a part of my project. Vue-Svg-Loader works just fine if I have the svg as part of my project, but doesn't seem to work when the SVG isn't available until runtime.
I've tried the following
<template>
<div ref="floorplan" id="floorplan-frame">
<object
type="image/svg+xml"
id="floorplan"
:data="svgPath"
></object>
</div>
</template>
<script>
export default {
data() {
return {
svgPath: 'http://test-mc4/floorplan.svg',
};
},
};
</script>
Unfortunately it doesn't work. If I replace the <object> tag with <img :src="svgPath" /> it does show the SVG, but as a static image where the internal css classes are not available. It does show me that my path is correct and the file is actually available, but it doesn't explain why the object tag is just empty when I use it.
I've searched extensively and I can figure out how to load it as an Object if it's internal, or how to load it External as long as it's an image. I just can't seem to figure out how to do both.
In order to access the elements within an <object>, you'd need to wait until it was loaded (load event) and then access the child SVG document by its contentDocument property.
Unfortunately, this won't work in your case because the SVG files are coming from a different origin. The same-origin policy will block access to the contentDocument. Here is an example, which also fails (logs null) because a data: URL is a different origin:
const svgPath = 'data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj4NCiAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0icmVkIi8+DQo8L3N2Zz4=';
const app = new Vue({
el: '#app',
data: {
svgPath,
},
methods: {
svgLoaded() {
setTimeout(() => {
console.log(this.$refs.object.contentDocument);
}, 1000);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<object
ref="object"
:data="svgPath"
width="100"
height="100"
v-on:load="svgLoaded"
></object>
</div>
The only way to load an SVG from a different origin and then access its internal structure with your JS and CSS would be to fetch it and then load it into your component as v-html. Note that this opens significant XSS vulnerabilities; you should be wary of this option and only use it with external servers you trust. In any case, here's a working example:
const svgPath = 'data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj4NCiAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0icmVkIi8+DQo8L3N2Zz4=';
const app = new Vue({
el: '#app',
data: {
svgData: '',
},
async mounted() {
const svgResponse = await fetch(svgPath);
this.svgData = await svgResponse.text();
await Vue.nextTick();
// SVG is present in the DOM at this point
const svg = this.$refs.drawing.firstElementChild;
console.log(svg.outerHTML);
// DOM manipulations can be performed
const circle = svg.querySelector('circle');
circle.setAttribute('fill', 'blue');
circle.setAttribute('r', '6');
}
});
.drawing {
width: 100px;
height: 100px;
}
/* SVG can be styled as part of the main document */
.drawing circle {
stroke: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
class="drawing"
ref="drawing"
v-html="svgData"
></div>
</div>
I have a expressjs app with the following code, what i am trying to do is to render a react component named Hello with the request to "/". Inside Hello component i am using two react-router Links, but these two Links doesn't render the href attributes.
I am using here react-router 2
Server.js file
var express = require("express");
var app = express();
var React = require("react");
var ReactDOM = require("react-dom/server");
var Hello = React.createFactory(require("./js/components/Hello"));
// The above is a reference to pre-compiled Hello.jsx to Hello.js using babel
app.set("view engine", "ejs");
app.set("views", "./views");
app.use(express.static("./public"));
app.get("/", function (req, res) {
res.render("Home",{data:ReactDOM.renderToString(Hello())});
});
app.listen(app.get("port"), function () {
console.log("server started on port " + app.get("port"));
});
Hello.jsx File
var React = require("react");
var Link = require("react-router/lib/Link");
var Hello = React.createClass({
callMe:function(){
alert("Hurray");
},
componentWillMount:function(){
console.log("componentWillMount fired");
},
render:function(){
// console.log(this);
return(
<div>
<h2 onClick={this.callMe}>Hello Boom Boom {this.props.name}</h2>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
// above two Links rendering anchor tags without href attribute
</div>
);
}
});
module.exports = Hello;
Home.ejs File
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h2>Welcome to home page</h2>
<div id="container">
<%- data %>
</div>
</body>
</html>
Please consult the React Router server rendering guide: https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
You need to render your components in an appropriate routing context for <Link> to generate URLs.
I just had the same problem, and the thing I was missing was the surrounding <RouterContext>. <Link> components seem to have an empty href attribute when not inside of a <Router> or appropriate react-router environment. I improved the routing in the SSR code (I was doing a weird partial solution) and the links started appearing.