I have embedded a flash based video in my HTML and showing it in a modal popup. When I close the popup, I want to programatically stop the playing video. How can I do this? I want to do this with JavaScript or jQuery.
<video controls="controls" loop="loop" poster="#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")" width="640" height="360" onclick="if(/Android/.test(navigator.userAgent))this.play();">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogg" />
<object type="application/x-shockwave-flash" data="#Url.Content("~/Content/videos/flashfox.swf")" width="640" height="360" style="position:relative;">
<param name="movie" value="#Url.Content("~/Content/videos/flashfox.swf")" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=true&controls=true&loop=true&src=" />
<embed src="#Url.Content("~/Content/videos/flashfox.swf")" width="640" height="360" style="position:relative;" flashVars="autoplay=true&controls=true&loop=true&poster=#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")&src=#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.mp4")" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k" src="#Url.Content("~/Content/videos/Keynote_v10_091211_ProResHQ_MIXED_AUDIO_750k.jpg")" style="position:absolute;left:0;" width="640" height="360" title="Video playback is not supported by your browser" />
</object>
</video>
Related
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>
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>
<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
I'm trying to include audio in a fancybox such that when you click an image and it pops-out audio will play as well. However, I don't want to download an external audio player but rather use the one that is currently included on the web page. Basically I simply want to change the audio that is currently playing by loading another MP3.
Here is the code for the audio player that is on the web page:
<div id="audioPlayerContainer" title="Audio Player">
<object type="application/x-shockwave-flash" data="../flash/player_mp3_maxi.swf" width="140" height="20">
<param name="wmode" value="transparent">
<param name="movie" value="../flash/player_mp3_maxi.swf">
<param name="FlashVars" value="configxml=../flash/config.xml&mp3=../audio/intro/intro_08_background_07.mp3">
<p>Flash Audio Player</p>
</object>
</div>
How would I be able to change the audio that is played once the following link is clicked?
<li style="float:left"><img alt="Raj Sharma" src="../images/intro_characters_Raj.png" /></li>
This link has a fancybox script attached to it which is shown below:
<script type="text/javascript">
$(document).ready(function(){
$("#clientPic li a").fancybox();
});
</script>
Here is a working example based on your code snippet, kindly check if this will suit your needs.
HTML:
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<ul style="text-align: center; margin-top: 20px;">
<li><a class="fancybox" href="#inline1" title="Now Playing: Sample 1">Launch Sample 1</a></li>
<li><a class="fancybox" href="#inline2" title="Now Playing: Sample 2">Launch Sample 2</a></li>
<li><a class="fancybox" href="#inline3" title="Now Playing: Sample 3">Launch Sample 3</a></li>
</ul>
<div id="inline1" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 1</p>
</object>
</div>
<div id="inline2" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
<p>Sample 2</p>
</div>
<div id="inline3" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 3</p>
</object>
</div>
JS:
$(document).ready(function() {
$('.fancybox').fancybox();
});
So basically there are 3 hidden divs, each with the corresponding players and .mp3. The corresponding div is loaded inside fancybox (See values in href).
Check also this link to see the code in action: http://jsfiddle.net/hNLdk/ Good luck.
Working on switching from Flash to a flash player/html5 video player hybrid solution. Using video.js player. I am looking to hide the player and show a div block with javascript upon video finishing. Would anyone know how to trigger this? I have a SWF container and a video container. Anyone have any suggestions?
www.friedmanllp.com/home3.php
Following code:
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="545" height="380" controls="controls" preload="auto" poster="http://www.friedmanllp.com/video/video.jpg">
<source src="http://www.friedmanllp.com/video/intro.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="545" height="380" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://www.friedmanllp.com/video/video.jpg", {"url": "http://www.friedmanllp.com/video/intro.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://www.friedmanllp.com/video/video.jpg" width="545" height="380" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
</div>
<div style="display:none; width:545px; height:380px; overflow:hidden;">
<div class="practices_link" style="float:left; margin-bottom:1px; width:95px; height:17px; cursor:pointer;"><img class="practices_on" style="margin-bottom:1px; width:95px; height:17px;" src="images/alt/practices_on.jpg" /><img class="practices_off" style="display:none; margin-bottom:1px; width:95px; height:17px;" src="images/alt/practices_off.jpg" /></div><div style="float:left; margin-bottom:1px; width:355px; height:17px;"><img src="images/alt/blank_alt.gif" style="width:355px; height:17px;"></div><div class="services_link" style="float:left; margin-bottom:1px; width:95px; height:17px;"><img class="services_off" style="margin-bottom:1px; width:95px; height:17px; cursor:pointer;" src="images/alt/services_off.jpg" /><img class="services_on" style="display:none; margin-bottom:1px; width:95px; height:17px; cursor:pointer;" src="images/alt/services_on.jpg" /></div>
<div id="slider">
<div id="practices" style="float:left; top:0; left:0; position:relative;">
<img style="margin-bottom:1px;" src="images/alt/1.jpg" />
<img style="margin-bottom:1px;" src="images/alt/2.jpg" />
<img style="margin-bottom:1px;" src="images/alt/3.jpg" />
<img style="margin-bottom:1px;" src="images/alt/4.jpg" />
<img style="margin-bottom:1px;" src="images/alt/5.jpg" />
<img style="margin-bottom:1px;" src="images/alt/6.jpg" />
</div>
<div id="services" style="float:left; top:-360px; left:545px; position:relative;">
<img style="margin-bottom:1px;" src="images/alt/7.jpg" />
<img style="margin-bottom:1px;" src="images/alt/8.jpg" />
<img style="margin-bottom:1px;" src="images/alt/9.jpg" />
<img style="margin-bottom:1px;" src="images/alt/10.jpg" />
<img style="margin-bottom:1px;" src="images/alt/11.jpg" />
<img style="margin-bottom:1px;" src="images/alt/12.jpg" />
</div>
</div>
</div>
I am looking to hide the player and show a div block with javascript upon video finishing.
Look in the docs of your video player whether it has an event for it; if it doesn't, change players.
JPlayer has events, for example.