onclick function change video - javascript

im quite a bigginer in js and do not understand, why the following code isnt working.
JS - Code:
function videoUrl(moin)
{
document.getElementById("video_item").src = moin;
}
HTML - Code:
<section id="second">
<div id="slide">
<div id="videos">
<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>
<!-- <video class="video_item" src="videos\Road - 81676.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Skyscrapers - 80724.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Tunnel - 84938.mp4" autoplay muted loop> </video> -->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Hair - 43633.mp4')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Road - 81676.mp4')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Skyscrapers - 80724.mp4')"> </li>
<li> <img src="image\adventure-5077752_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Tunnel - 84938.mp4')"> </li>
</ul>
</div>
</section>
Output:
enter image description here


var video = document.getElementById('video');
function videoUrl(url){
video.pause();
const source = video.querySelector("source");
source.setAttribute('src', url);
video.load();
video.play();
}
<div id="videos">
<video class="video_item" id="video" width="320" height="240" autoplay muted loop controls>
<source src="https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA">
</video>
<!--<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>-->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi4210998297/1434659607842-pgv4ql-1557169076640.mp4?Expires=1633358564&Signature=kdOmIWItw1tSY3BTzVNLATmRS1RFyf1J-5HjJZPesSrxk50c02E4Mefb8z6B76i7AGsiNRmbXw5mZBn6qv6KY~Ag15voKEVK~6mxmM9N9EV52YXYzYosqK2YfuSmHE-QiwyQt3IeQ41jC1mSFXlh8uqXOXmBMx1vaRLWHU1K2toJmE1vXSycbwwtm6pARUdVnUY5rQcT0vthpdEMvZRQn~58meyUv8Ml8GWNvKZ91~N2Ivu-0czpMJFm4VL71beSXpP6N4b9fVE~1Jp6yslWPFU99o0tVb0GIb8nW6VEGo~xVC300BxDi-EkyJqVrxTq75hzMX8aOq~jM-m-A-WCGg__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://www.w3schools.com/jsref/movie.mp4')"> </li>
</ul>

Related

VideoJS how can i redirect when click on video?

I try this but dont work anymore, url just doesn't open in mobiles
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<a target="_blank" href="https://www.examplepage.com">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
</a>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>

Video is not showing up in ios os

i have an up loader that uploads the video which is working on all devices and OS but not the iPhone ether the chrome or safari fails to open the video any idea what might be wrong because i checked net and i came up with this solution : in ios the player loads but it does not shows the video with the below solution
<video class="video" playsinline autoplay muted loop>
i did this yet no luck . this is the link i am trying to play video on ios :
https://wishato.com/wish/wStvun
here is my code for video :
<template>
<div class="wishgallery">
<loading :display="loading"></loading>
<div class="gallery" v-show="dataLoaded">
<transition-group name="wish-gallery"
tag="div"
class="gallery-items"
:enter-active-class="enterClass"
:leave-active-class="leaveClass">
<div v-for="(item) in slideShow" :key="item.id" class="gallery-item"
v-show="item.active">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato" v-on:load="imgLoaded($event)">
<video class="video" controls v-else-if="item.mime=='video/mp4'" poster="">
<source :src="item.path" :type="item.mime">
your browser cant support this format
</video>
</div>
</transition-group>
<div class="navigator" v-if="slideShow.length > 1" :class="[{hidenavigator: navStat}]">
<span class="hideIcon" #click="hidenav">
<i class="icon icon-chevron-down"></i>
</span>
<div class="nav-items">
<div class="nav-cont">
<div v-for="(item) in slideShow" :key="item.id" class="nav-item"
:class="{active : item.active}" #click="changeImage(item.id)">
<img v-if="item.mime.match('image')" :src="item.path" alt="wishato"
v-on:load="imgLoaded($event)">
<div class="video" v-else-if="item.mime.match('video')">
<i class="icon icon-playvideo"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

LightGallery all html5 videos are playing at the same time

I have used lightGallery plugin to play youtube, vimeo, and html5 videos. When a user clicks the image videos should play automatically.
Please check the Demo, It's working fine. But the problem is if there are two html5 videos both are playing at the same time. Youtube videos are not like that. When you click the image one youtube video will play at a time and when you slide to next video, the previous video will pause and the new video will play. But html5 all videos are playing at the same time. Please help.
$(document).ready(function() {
$('#html5-videos').lightGallery({});
});
img {
width: 220px;
height: 150px;
}
ul {
list-style: none;
}
li {
display: initial;
}
<link href="https://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.6/js/lightgallery-all.min.js"></script>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="https://sachinchoolur.github.io/lightGallery/static/videos/video4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="http://sachinchoolur.github.io/lightGallery/static/videos/video2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul id="html5-videos">
<!-- Youtube video -->
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=yp0a1oZQRVM" data-sub-html="Youtube video first">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg);">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/yp0a1oZQRVM/0.jpg">
</a>
</li>
<li class="selectoritem video width100" data-src="https://www.youtube.com/watch?v=g4o8jfO92CI" data-sub-html="Youtube video second">
<a href="" class="thumbnail width100 portimgfullwidth" style="background-image: url(https://img.youtube.com/vi/g4o8jfO92CI/0.jpg;">
<img class="img-responsive widthauto hide" src="https://img.youtube.com/vi/g4o8jfO92CI/0.jpg">
</a>
</li>
<!-- Html 5 video -->
<li data-sub-html="video caption1" data-html="#video1">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/videos/h-video3-poster.jpg" />
</li>
<li data-sub-html="video caption2" data-html="#video2">
<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-1.jpg" />
</li>
</ul>

I found the answer on GitHub.
https://github.com/sachinchoolur/lightGallery/issues/598
https://github.com/sachinchoolur/lightGallery/issues/524
I updated lg-video.js and it's working fine.

Javascript getAttribute in Edge

I am trying to load videos after the page finishes loading. The script I'm using works in firefox and chrome, but throws errors in Edge/IE.
the error is SCRIPT5007: Unable to get property 'append' of undefined or null reference I get it on the full build and the line it indicates is iframe.id = v[n].getAttribute('youtube'); The issue is that it doesn't add the iframe to the page so no videos. The error on codepen is Unable to get property 'src' of undefined or null reference since the iframe is not getting appended to the page. Here is the html/js I'm currently using. I've tried a few variations like v[n].attr(). I tried changing it to data-youtube and using v[n].dataset.youtube. Nothing seems to work in Edge.
codepen working on ff/chrome
<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
<ul role="tablist">
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
<span>SteamVR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
<span>SUPERHOT VR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
<span>Free the Night</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
<span>Minecraft</span>
</a>
</li>
</ul>
<ul id="m-multi-description">
<li id="newIconItemContent13" role="tabpanel" class="f-active">
<h4 class="c-heading-10">VERTIGO GAMES</h4>
<h3 class="c-heading">Skyworld</h3>
<p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
</li>
<li id="newIconItemContent11" role="tabpanel" >
<!-- <h4 class="c-heading-10">Microsoft</h4> -->
<h3 class="c-heading">Steam®VR</h3>
<p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
</li>
<li id="newIconItemContent12" role="tabpanel">
<h4 class="c-heading-10">SUPERHOT TEAM</h4>
<h3 class="c-heading">SUPERHOT VR</h3>
<p>
The iconic VR FPS is here; time moves only when you do.
</p>
</li>
<li id="newIconItemContent14" role="tabpanel">
<h4 class="c-heading-10">JAUNT</h4>
<h3 class="c-heading">Free the Night</h3>
<p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
</li>
<li id="newIconItemContent15" role="tabpanel">
<h4 class="c-heading-10">MICROSOFT</h4>
<h3 class="c-heading">Minecraft</h3>
<p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
</li>
</ul>
<div class="c-carousel f-multi-slide" role="region" aria-label="Images">
<div class="background-skew"></div>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
<picture class="c-image">
<source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
<img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
</li>
<div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
<!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage11" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
</li>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
<!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage12" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
</li>
<div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
<!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
<img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
</li>
<div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
<!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
<img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
</li>
<div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
<!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
</ul>
</div>
</div>
</section>
//lazy load youtube vids
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.id = v[n].attributes['youtube'].value;
v[n].append(iframe);
console.log(v[n].getAttribute('youtube') + 'youtube');
}
});
// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}

I ended up getting it to work by using iframe.setAttribute('id', v[n].getAttribute('youtube')); not sure why this works and not v[n].attributes['youtube'].value;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute('id', v[n].getAttribute('youtube'));
v[n].appendChild(iframe);
}
});

Play selected video

<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>
<video id="6" width="320" height="240" controls="controls"></video>
<video id="1" style="display: none;"width="320" height="240" controls="controls">
<source src="movie1.mp4" type="video/mp4" />
<source src="movie1.ogg" type="video/ogg" />
<source src="movie1.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<video id="2" style="display: none;" width="320" height="240" controls="controls">
<source src="movie2.mp4" type="video/mp4" />
<source src="movie2.ogg" type="video/ogg" />
<source src="movie2.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>
When selecting "Play Video 2" while Video 1 is playing video 2 will not work, how can i resolve this? Is there additional script I have to add so that the second video will override the first?

<script type="text/javascript">
function playVideo(sourceId, targetId) {
if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
targetId.innerHTML=sourceId.innerHTML;
return false;
}
</script>
<div id="6"></div>
<div id="1" style="display: none">
<video width="320" height="240" controls="controls">
<source src="movie1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div id="2" style="display: none">
<video width="320" height="240" controls="controls">
<source src="movie2.avi" type="video/avi" />
Your browser does not support the video tag.
</video>
</div>
<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>
What I did: I placed the two video elements within invisible divs. Those divs have ids (1 & 2) and the content of those divs (your video elements) are loaded into a third (visible) div with id 6.

The way your playVideo function works is...not intuitive.
Use videoElement.play(); to play a video. For example, document.getElementById('1').play();. To stop a video from playing, use stop();
Tutorial / docs

Categories