យើងបានដឹងរួចមកហើយថា នៅក្នុង schema នៃបណ្តុំទិន្នន័យនៃការផ្សាយ ទិន្នន័យដែលជាវីដេអូត្រូវបានយោងទៅលើបណ្តុំទិន្នន័យ videos អាស្រ័យហេុតុនេះ យើងចាំបាច់ត្រូវស្រង់យកទិន្នន័យដែលជាវីដេអូនេះ បន្ទាប់ពីទិន្នន័យដែលយោងទៅលើបណ្តុំទិន្នន័យ videos ត្រូវបានស្រង់ចេញពីបណ្តុំទិន្នន័យ posts ។ ដូចគ្នាដែរ ចំពោះទិន្នន័យដែលជាអ្នកនិពន្ធដែលយោងទៅលើបណ្តុំទិន្នន័យ authors យើងចាំបាច់ត្រូវធ្វើដូចគ្នានេះ ដោយស្រង់វាចេញពីបណ្តុំទិន្នន័យ authors ។ ការស្រង់យកទិន្នន័យទាំងពីរនេះ ត្រូវធ្វើឡើងដោយប្រើប្រាស់ក្បួន getEntry( ) នៅក្នុងកញ្ចប់ Astro ។
import { getEntry } from 'astro:content'
const { post } = Astro.props
const { Content } = await post.render()
const author = await getEntry(post.data.author)
const videos = await getEntry(post.data.videos)
ក្រោយពីត្រូវបានស្រង់ចេញពីបណ្តុំទិន្នន័យ videos រួចហើយ យើងអាចបញ្ជូនទិន្នន័យនេះទៅកាន់ browser ដោយភ្ជាប់វាទៅនឹងលក្ខណៈ data-* នៃធាតុណាមួយ។
<div class="video" data-videos={JSON.stringify(videos?.data.videos)}>
<div class="screen"></div>
<div class="playlist" data-title={post.data.title}></div>
</div>
នៅក្នុង browser យើងអាចស្រង់យកទិន្នន័យនេះបាន ដោយធ្វើដូចខាងក្រោមនេះ៖
let rawVideos = $('.Post .main .video').attr('data-videos')
const title = $('.Post .main .video .playlist').attr('data-title')
const videos = JSON.parse(rawVideos)
បន្ទាប់ពីស្រង់បានទិន្នន័យវីដេអូរួចហើយ យើងអាចបង្កើតប្រដាប់លេងវីដេអូនិងបញ្ចូលវាទៅក្នុងគំរូទំព័រការផ្សាយដោយសរសេរកូដដូចខាងក្រោមនេះ៖
//public/scripts/setPlayer.js
function setScreen(video,id,click){
if(video['vidType'] == 'OK'){
var url = `//ok.ru/videoembed/${video['id']}`
}else if(video['vidType'] == 'YouTube'){
var url = `https://www.youtube.com/embed/${video['id']}`
}else if(video['vidType'] == 'YouTubePlaylist'){
var url = `https://www.youtube.com/embed/videoseries?list=${video['id']}`
}else if(video['vidType'] === "Facebook"){
var url = `https://www.facebook.com/watch/?v=${video['id']}`
}else if(video['vidType'] === "GoogleDrive"){
var url = `https://docs.google.com/file/d/${video['id']}/preview`
}else if(video['vidType'] === "Vimeo"){
var url = `https://player.vimeo.com/video/${video['id']}`
}else if(video['vidType'] === "Dailymotion"){
var url = `https://www.dailymotion.com/embed/video/${video['id']}`
}
if(video['vidType'] !== 'Facebook'){
var iframe = `<div><iframe src="${url}" frameborder="0" allowfullscreen></iframe></div>`
}else{
var iframe = `<div class="fb-video" data-href="${url}" data-width="auto" data-show-captions="true"></div>`
}
if(click){
$('.Post .video .playlist #part'+clicked)
.css({'background':'var(--playlist-part)', 'color': 'var(--playlist-color)'})
}
$('.Post .video .playlist #part'+id)
.css({'background':'var(--playlist-clicked-bg)', 'color': 'var(--playlist-clicked)'})
$('.screen').html(iframe)
clicked = id
}
const videos = JSON.parse(rawVideos)
for(let index in videos){
let ending = ''
if(index == videos.length-1){
ending = videos[index].status
}
let result = `<div id="part${index}" class="part" onClick="setScreen(videos[${index}], ${index},true)">${title} part ${(++index)} ${ending}</div>`
$('.playlist').append(html)
}
setScreen(videos[0],0,false)
ដើម្បីអាចមើលវីដេអូនៅប្រព័ន្ធ Facebook បាន យើងត្រូវបញ្ចូលកូដ JavaScript SDK ខាងក្រោមនេះ ទៅក្នុងគំរូទំព័រការផ្សាយៈ
<div id="fb-root"></div>
<script is:inline async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0&appId=3245867309046703&autoLogAppEvents=1" nonce="uHaMaoD7"></script>
សរុបមក កូដនៅក្នុងគំរូទំព័រការផ្សាយត្រូវមានសណ្ឋានដូចខាងក្រោមនេះៈ
<!--src/layouts/Post.astro-->
---
import { getEntry } from 'astro:content'
const { post } = Astro.props
const { Content } = await post.render()
const author = await getEntry(post.data.author)
const videos = await getEntry(post.data.videos)
---
<section class="Ad region">
<img src="/images/ad.jpg" />
<img src="/images/ad.jpg" />
</section>
<div id="fb-root"></div>
<script is:inline async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0&appId=3245867309046703&autoLogAppEvents=1" nonce="uHaMaoD7"></script>
<section class="Post region">
<div class="main">
<h3 class="title">{post.data.title}</h3>
<div class="categories">
<span>ជំពូកៈ {post.data.categories.join(', ')}</span>
<span>{post.data.pudate.toLocaleDateString('it-IT')}</span>
</div>
<div class="author">
<span>អ្នករៀបរៀងៈ {author.data.name}</span>
</div>
<div class="video" data-videos={JSON.stringify(videos?.data.videos)}>
<div class="screen"></div>
<div class="playlist" data-title={post.data.title}></div>
</div>
<script is:inline src="/scripts/setplayer.js"></script>
<script is:inline>
let clicked = 0
let rawVideos = $('.Post .main .video').attr('data-videos')
const title = $('.Post .main .video .playlist').attr('data-title')
const videos = JSON.parse(rawVideos)
for(let index in videos){
let ending = ''
if(index == videos.length-1){
ending = videos[index].status
}
let result = `<div id="part${index}" class="part" onClick="setScreen(videos[${index}], ${index},true)">${title} part ${(++index)} ${ending}</div>`
$('.playlist').append(result)
}
setScreen(videos[0],0,false)
</script>
<div class="content"><Content/></div>
</div>
<div class="sidebar">
ផ្សាយពាណិជ្ជកម្ម
</div>
</section>
<style is:global>
.Ad{
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 10px;
}
.Ad img{
width: 100%;
}
.Post{
margin-top: 20px;
display: grid;
grid-template-columns: 70% auto;
grid-gap: 15px;
}
.Post .main, .Post .sidebar{
background-color: rgb(231, 223, 223);
color: rgb(22, 22, 22);
padding: 15px;
}
.Post .sidebar{
text-align: center;
padding: 0;
}
.Post .main .title{
font: 18px/1.5 Oswald, Koulen;
margin-bottom: 20px;
}
.Post .main .categories span:nth-child(2){
float: right;
}
.Post .main .author{
margin-bottom: 30px;
}
.Post .main .video .screen div{
position: relative;
padding-top: 56.25%;
border: 1px solid white;
border-bottom: none;
}
.Post .main .video .screen div iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Post .main .video .playlist{
max-height: 405px;
overflow: auto;
margin-bottom: 20px;
border: 1px solid white;
}
.Post .main .video .playlist .part{
text-align: left;
padding: 10px;
color: var(--color);
display: block;
height: auto;
font-size: 16px;
background: var(--body);
border: 1px solid white;
border-top: none;
}
.Post .main .video .playlist .part:last-child{
margin-bottom: 0;
}
.Post .main .video .playlist .part:hover{
cursor: pointer;
opacity: .7;
}
@media only screen and (max-width:600px){
.Ad{
grid-template-columns: 100%;
}
.Post{
grid-template-columns: 100%;
}
}
</style>
