Fermé

Linking video control with mapbox in javascript language

I am developing a video tracking platform on mapbox using video's gpx data.

I want the marker should change the lat long as per c1 and c2 changes.

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>CodePen - HTML5 Video -interactive transcript-</title>

<link rel="stylesheet" href="./[login to view URL]">

</head>

<body>

<!-- partial:[login to view URL] -->

<div class="video-container">

<video id="myVideo" poster="[login to view URL]" width="640" height="368" controls>

<source src="[login to view URL]" type="video/mp4">

<source src="[login to view URL]" type="video/webm">

<source src="[login to view URL]" type="video/ogg">

<track src="[login to view URL]">

Your browser does not support the <code>video</code> element.

<!--Flash Fallback

<object width="640" height="368" type="application/x-shockwave-flash" data="[login to view URL]">

<param name="movie" value="[login to view URL]">

<param name="flashvars" value="controlbar=over&image=posterimage.jpg&file=[login to view URL]">

</object>-->

</video>

</div>

<!--eo-videocontainer-->

<div id="speaking" aria-live="rude">

</div>

**<div id="transcriptContainer">

<div id="transcriptText">

<p id="c1" class="cue" data-time="0.0" aria-live="rude" tabindex="1">

Mine & Tolga Wedding First Dance 13.12.2014

</p>

<p id="c2" class="cue" data-time="1.0" tabindex="1">

Fly me to the moon

<p id="c3" class="cue" data-time="2.0" tabindex="1">

And let me play among the stars

</p>

<p id="c4" class="cue" data-time="3.0" tabindex="1">

Let me see what spring is like

</p>

<p id="c5" class="cue" data-time="4.0" tabindex="1">

On Jupiter and Mars

</p>

<p id="c6" class="cue" data-time="5.0" aria-live="rude"tabindex="1">

In other words hold my hand

</p>

<p id="c7" class="cue" data-time="6.0" tabindex="1">

In other words baby kiss me

</p>

<p id="c8" class="cue" data-time="35.0" tabindex="1">

Fill my life with song

<p id="c9" class="cue" data-time="38.0" tabindex="1">

And let me sing forevermore

</p>

<p id="c10" class="cue" data-time="44.0" tabindex="1">

You are all I hope for

</p>

<p id="c11" class="cue" data-time="47.0" tabindex="1">

All I worship and adore

</p>

<p id="c12" class="cue" data-time="52.0" aria-live="rude"tabindex="1">

In other words please be true

</p>

<p id="c13" class="cue" data-time="60.0" tabindex="1">

In other words I love you

</p>

<p id="c14" class="cue" data-time="10.0" tabindex="1">

You are all I hope for

</p>

</div><!--eo-transcripttext-->

</div><!--eo-transcriptcontainer--> **

<div class="clear"></div>

<!-- partial -->

<meta charset="utf-8" />

<title>Add a default marker</title>

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

<script src="[login to view URL]"></script>

<link href="[login to view URL]" rel="stylesheet" />

<style>

body { margin: 0; padding: 0; }

#map { position: absolute; top: 0; bottom: 0; width: 30%;left:70%; }

</style>

</head>

<body>

<div id="map"></div>

<script>

[login to view URL] = 'pk.eyJ1IjoiZHVyZ2VzaDEyM3NkZWZncmJlbmciLCJhIjoiY2pnMWptY2JjMTQwcjJ3bnhwbTVkMHd6dSJ9.drdX9xK-516hfpv_UxZc_w';

var map = new [login to view URL]({

container: 'map',

style: 'mapbox://styles/mapbox/streets-v11',

center: [12.550343, 55.665957],

zoom: 8

});

** var marker = new [login to view URL]()

.setLngLat([12.550343, 55.665957])

.addTo(map); **

</script>

<script src="./[login to view URL]"></script>

</body>

</html>

Compétences : JavaScript, HTML5, Adobe Flash, CSS, ActionScript

en voir plus : html javascript language selector, flash video control panel, javascript language selector, mapbox search demo, mapbox examples, mapbox angular 7 example, mapbox gl js tutorial, mapbox 3d globe, mapbox popup, mapbox gl js, mapbox node js example, flash video control customizing, adjuster control webpage javascript, english language video file translation urdu language, extends video control flex, create flash video control panel, video control flex3, find aspnet control repeater javascript, ver video con thumbnail javascript, video thumbnail preview javascript

Concernant l'employeur :
( 1 commentaire ) Băilești, Romania

Nº du projet : #26887774

5 freelance font une offre moyenne de $12/heure pour ce travail

mianawais514

Respected client, I was understand what do you want you can see my skills in my portfolio .I assure you that i will fulfil with your requirement i am student of BS Software Enger. i also build many website using B Plus

$8 USD / heure
(3 Commentaires)
1.0
SiniyaBoroda

Hello. How are you? I have been working with php google map api for many years. I read your description carefully and understand your requirements fully. The nice and familiar interface will greatly make you happy and Plus

$20 USD / heure
(1 Évaluation)
1.3
Oleksiy96

Hi how are you? im javascript & jqeury master for many years, and familiar with the video control in node now. I can resolve your project issue within 30 minutes, and ready to start work right now. Please contact me to Plus

$8 USD / heure
(0 Commentaires)
0.0
moutellou

You need to put a jquery listener on c1 or c1 paragraph and update the coordinates accordingly I'm open to chat if you have questions

$12 USD / heure
(0 Commentaires)
0.0
muruganselvaraj

I've experience of designing and implementing mapbox GL JS library, javascript,HTM 5 and CSS . have a look at my project https://fingby.com.

$10 USD / heure
(0 Commentaires)
0.0