Hello !
I have a little problem with the integration of the videojs script.
I added the css in the head of the site but when I put the rest of the code via markdown (with the code function) it transcribes it as text!
Example: https://prnt.sc/skrc1g
Do you have an idea ?
Raw code is stripped out of markdown by default. This is because in some scenarios it leads to XSS (cross-site scripting)
If you can 100% trust the content, then it's ok.
What's the use case? There are some tricks to get around it.
It is a script used to replace JWplayer that we no longer use. The content is 100% safe since it comes from our CDN.
Like this page : https://www.netgen-esports.be/work/ego-be-brussels-esport-show
Exemple of code :
<!--Load videojs and nuevo plugin-->
<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/video.min.js"></script>
<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/nuevo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vjs-quality-picker.min.js"></script>
<!--Video tag setup-->
<video id="player_one" class="video-js vjs-fluid vjs-default-skin" controls preload playsinline poster="images/poster.jpg">
<source src="https://videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81/manifest/video.m3u8" type="application/x-mpegURL">
</video>
<!--Initialize the player and plugin-->
<script>
// Optionally override HTML native playback, usually required for Android devices, but not for iOS.
videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeTextTracks = false;
var player = videojs('player_one');
player.nuevo({
logo: "https://netgen-esports.be/logo-a9bb1f94.png",
logourl: "/netgen-esports.be"
});
player.chromecast({ button:'controlbar' });
</script>
```For now, you can use embed code I think but you can't direct load JavaScript.
I can think about this but it creates a real security risk in many scenarios.
Can we add the script by package.json ?
Here's what you can do, we'll load in what you'd like as a component.
Step 1: Add a component that does everything you need that code to do.
Step 2: Add the component as a setting in your factor-settings file:
export default {
myComponent: () => import("./path/to/component.vue")
}
Step 3: Use the special <component class="inject-component"> element directly in your markdown
# my markdown
<component class="inject-component" id="myComponent"></component>
Hi,
Not working for me
Link of image https://prnt.sc/sqsxbz
The script from component not loading (still import comp).
Show me the settings file and where you added the component
Hi !
Here is factor-settings.ts :
export default {
googleTagManager: {
googleTagManagerId: "GTM-XXXX",
developmentMode: true
},
VideoEgoBeBrusselsShowTrailer: () => import("./video/ego-be-brussels-show-trailer.vue"),
VideoEgoBeBrusselsShowDemo: () => import("./video/ego-be-brussels-show-demo.vue"),
VideoYWL2Demo: () => import("./video/ywl2-redsportsTV-demo.vue"),
headTags: {
font: `<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet" />`
},
metatags: {
defaultTitle: "netgen esports",
titleTemplate: "netgen esports - your esports partner in Belgium"
},
site: {
components: {
header: (): Promise<any> => import("./header.vue"),
footer: (): Promise<any> => import("./footer.vue"),
},
logo: (): Promise<any> => import("./el/logo.vue"),
--
Here /video/ego-be-brussels-show-demo.vue :
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/video.min.js"></script>
<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/nuevo.min.js"></script>
<script src="//cdn.netgen-esports.be/video/player/videojs/plugins/videojs-chromecast.min.js"></script>
<video id="player_one" class="video-js vjs-default-skin vjs-fluid" controls preload="auto" poster="https://cdn.netgen-esports.be/img/netgen-esports-web/poster/Demo-EGO-Be-Brussels-Show.jpg">
<source src="https://videodelivery.net/2605e41f6c0df86f2110594466876acd/manifest/video.m3u8" type="application/x-mpegURL">
</video>
<script>
// Optionally override HTML native playback, usually required for Android devices, but not for iOS.
videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeTextTracks = false;
//Initialize videojs player
var player = videojs('player_one',{techOrder:['chromecast','html5']});
player.nuevo();
player.chromecast({ button:'controlbar' });
</script>
```Did you add:
<component class="inject-component" id="VideoEgoBeBrusselsShowDemo"/>```Yes, check the link : https://prnt.sc/swuu9c
Any idea ?