Videojs in markdown probs ?

Support

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 ?

11