How to change video source through selecting link - HTML - javascript

I'm trying to change the source of a video from selecting a link. So when the link is selected on the page, it will change the video overhead to the source of another video, sort of like a playlist.
This is the code for my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video.mp4" />
</video>
<br />
<a> Other Video </a>

Check out the HTML standard:
http://www.whatwg.org/specs/web-apps/current-work/#video.
There's a couple of solutions you could use. One is loading the next video sequentially, like a playlist:
<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('video');
videoPlayer.onend = function(){
videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />
Then, making a link to change it would be as simple as (for example):
$("a.change_link").click(function(){
videoPlayer.src = nextVideo;
});

in <source src="video.mp4" type="video.mp4" /> line type="video.mp4" is wrong you cant place this type of value here
here's is the some example of type : video/mp3, video/ogg, video/wbem.

To achieve what you are asking for, if you stick the video path in say the alt of the link, you can then reference it and stick that into the src of the video onclick with some simple jquery.
jsfiddle
Modified html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px; padding:10px; border:1px solid black;">
<source src="video.mp4" type="video/mp3" />
</video>
<br />
<a alt="video2.mp4" id="other"> Other Video </a>​
Some jquery:
$('#other').click( function() {
$('#first_video').children('source').attr('src',$(this).attr('alt'))
});​

Related

Image to play sound onclick

I'm trying to make a song play when I click on an image. everytime I do it using the solutions on the here Either the image doesn't show, the audio doesn't play, or both. I don't understand what my issue is and could use any help.
My HTML
`
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>#F7D64B</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
</head>
<body>
<script>
var audio = new Audio('Music/song.wav');
function myAudioFunction
<script>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<a onclick="document.getElementById("audio").play();">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
</center>
</body>
<footer>
<!-- art by #woun404-->
<!-- #F7D64B -->
</footer>
</html>`
Here's a working example:
document.getElementById('play').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('audio').play();
});
<audio id="audio" src="http://www.soundboard.com/handler/DownLoadTrack.ashx?cliptitle=Never+Gonna+Give+You+Up-+Original&filename=mz/Mzg1ODMxNTIzMzg1ODM3_JzthsfvUY24.MP3"></audio>
<a href="#" id="play">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
Using JavaScript only would look like this:
<body>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</center>
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
<script>
</body>
It is advised to use JavaScript for big projects since it works way faster.

HTML5 video tag Firefox and jQuery controls Bug

Don't find why the controls of my video tag doesn't work on firefox when i put the jquery.min.js file link on my page...
Do you have an idea ?
when the jquery file link is remove it's work on all browser but i need to use jquery for magnific-popup so can't be remove.
the code look like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><% if (pageId != 'index') { %><%= pageTitle %> - <% } %><%= siteName %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="canonical" href="<%= siteRootUrl %>" >
<link rel="stylesheet" href="./css/magnific-popup.css">
</head>
<body class="page-<%= pageId %>">
<video class="videos" controls="true" poster="./images/poster_inu.jpg" data-description="video1">
<source src="./images/inu.mp4" type="video/mp4">
<source src="./images/inu.ogg" type="video/ogg">
<source src="./images/inu.webm" type="video/webm">
</video>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

My videojs Vast player failed to load video flash ads

As you can see the examples here https://github.com/theonion/videojs-vast-plugin,the player plays video ad before the main video.But when I put the urls offered by my advertisers in my own HTML page,no ad and I have to click the play button then the main video will start.This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>
<!--<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">-->
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="videojs.vast.css">
<link href="lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
<link href="videojs.vast.css" rel="stylesheet" type="text/css">
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<style>
.example-video-container {
position: absolute;
top: 30px;
left: 50%;
margin-left: -315px;
}
#vid2 {
position: absolute;
top: 30px;
}
</style>
<!--[if lt IE 9]><script src="lib/es5.js"></script><![endif]-->
<!--<script src="http://vjs.zencdn.net/4.7.1/video.js"></script>-->
<script src="js/video.js"></script>
<script src="lib/videojs-contrib-ads/videojs.ads.js"></script>
<script src="lib/vast-client.js"></script>
<script src="videojs.vast.js"></script>
</head>
<body>
<div class="example-video-container">
<video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto"
poster=""
data-setup='{}'
width='710'
height='500'
>
<source src="v1.mp4" type='video/mp4'>
<!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>-->
<p>Video Playback Not Supported</p>
</video>
</div>
<script type="text/javascript">
console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
videojs('vid2',{}, function () {
var timestamp=Math.round(new Date().getTime()/1000);
console.log(timestamp);
var player = this;
player.ads();
player.vast({
url:'https://p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500'
});
player.on('readyforpreroll',function(){
player.ads.startLinearAdMode();
console.log('adsstart');
player.one('ended', function() {
player.ads.endLinearAdMode();
console.log('adsend');
});
});
});
</script>
</body>
</html>
And the xml file return this.
<VAST version="2.0">
<Ad id="VPAID">
<InLine>
<AdSystem version="1.0">Cedato</AdSystem>
<AdTitle>Cedato VPAID Ad Manager</AdTitle>
<Impression />
<Creatives>
<Creative sequence="1">
<Linear>
<Duration>00:00:30</Duration>
<MediaFiles>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/x-shockwave-flash" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpw_ima_101.82.swf?vp=378&p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/javascript" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpaid_102.83.js?p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
Is there anyone can tell me how to fix this?
Afaig, the videojs-vast-plugin isn't able to play VPAID.
You will need for example the videojs-vast-vpaid plugin.
Unfortunately I wasn't able to play the resource, 'cause:
AD ERROR: VAST Error: on VPAIDAdUnitWrapper.waitForEvent, timeout while waiting for event 'AdLoaded'
but this could be caused by the ad-server configuration (aka my referrer might not be accepted), so you need to find out yourself.
You will find examples for the videojs-vast-vpaid plugin on github, but here is what i did:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js VAST Example</title>
<!-- VideoJs required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video-js.css"/>
<!-- VideoJs.vast.vpaid required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/styles/videojs.vast.vpaid.css"/>
<!-- DEMO required styles-->
<link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/styles/demo.css"/>
<!-- Web Fonts -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<script type="text/javascript">
// this is mandatory for IE8 !!!!!
document.createElement('video');
document.createElement('audio');
document.createElement('track');
</script>
<!-- VideoJs required scripts-->
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video.js"></script>
<!-- VideoJs.vast.vpaid required scripts-->
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/es5-shim.js"></script>
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/ie8fix.js"></script>
<script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/videojs_4.vast.vpaid.js"></script>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<div class="example-video-container">
<video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto" poster="" data-setup='{}' width='710' height='500'>
<source src="oceans.mp4" type='video/mp4'>
<p>Video Playback Not Supported</p>
</video>
</div>
<script type="text/javascript">
console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
var timestamp = Math.round(new Date().getTime()/1000);
var vjs = videojs('vid2',{}, function () {
var player = this;
var vastPlugin = player.vastClient({
adTagUrl: '//p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500',
//adTagUrl: '//rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25',
playAdAlways: true,
adCancelTimeout: 60000,
vpaidFlashLoaderPath: './VPAIDFlash.swf'
});
player.on('reset', function () {
console.log('vast-plugin enabled - ' + vastPlugin.isEnabled() ? 'true' : 'false')
if (!vastPlugin.isEnabled()) {
vastPlugin.enable();
} else {
vastAd.disable();
}
});
});
</script>
</body>
</html>
A resource which works and I used for testing: http://rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25
The config might not be perfect - I'm relatively little familiar with this player.
Hope this was helpfull somehow and have a nice day.
Unfortunately I cannot run tests at the moment, but from your description of the issue maybe this parameter needs to be updated d=https%3A%2F%2Fh5.xcloudgame.com ?

Strange behavior when updating an iframe with JQuery

In the following code, when you click the link it swaps out the iframe src attribute with another video as expected. What I find strange is that it appears to create a history in my browser, allowing me to navigate backward and forward between the two videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").attr('src', url);
});
});
</script>
</head>
<body>
<iframe id="video" width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
<p><a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a></p>
</body>
</html>
If I update the code, however, by wrapping the iframe in a div and replace the entire contents of that div (as opposed to just changing the src attribute), it swaps out the video with no browser history.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").html('<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
});
});
</script>
</head>
<body>
<div id="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
</div>
<a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a>
</body>
</html>
Is this expected behavior or can anyone explain to me why it is happening?

Can't find function after adding iFrame

A simple Hello world function and a button that illustrate the error. Comment out the iFrame - works like a charm. Remove the comments - Fatal error. I am puzzled.
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"/>
</body>
</html>
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
Put your javascript correctly :
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
</head>
Retype the <iframe> to right syntax.
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
Full Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
alert("Hello world");
}
</script>
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
</body>
</html>
It should works.

Categories