+ (deprecated) Hint/Video Tutorial
Source Code
index.html
<!-- Styles for Hint Video -->
<link
rel="stylesheet"
href="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-video.css"
/>
<!-- Styles for Video -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<link
rel="stylesheet"
href="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/video-tools-section/video-player.css"
/>
<!-- Button container -->
<div class="button-container">
<button id="btn-hint" class="button" onclick="hintClick()">Hint</button>
<button id="btn-video" class="button" onclick="videoBtnClick()">
Video Tutorial
</button>
</div>
<!-- HINT BLOCK -->
<div id="hint-block" class="block">
<!-- Change the hint content -->
1. It is recommended to do ... <br />
2. Use such method <code>some code</code> text again <br />
3. Return the format <br />
</div>
<!-- VIDEO BLOCK -->
<div id="video-block" class="block">
<div class="custom-player">
<video width="100%" controls>
<!-- Change the video src -->
<source
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/react-router/suspense-recording.mp4"
type="video/mp4"
data-plyr-config='{
"quality": {
"default": "720",
"options": ["144", "240", "360", "480", "720", "1080"]
}
}'
/>
</video>
</div>
</div>
<!-- Hint Video Script -->
<script src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-video.js"></script>
<!-- Video Script -->
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<script src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/video-tools-section/video-player.js"></script>
War alles klar?
Danke für Ihr Feedback!
Abschnitt 9. Kapitel 10
