I am trying to play youtube video in a html page with a custom play button like this fiddle.
HTML
<button id="btn">Play</button>
<object type="application/x-shockwave-flash" id="yt" data="http://www.youtube.com/v/6eK-W32IME0?fs=1&enablejsapi=1&hl=en_US" width="330" height="200"><param name="allowScriptAccess" value="always"/></object>
JavaScript
var yt = document.getElementById("yt");
document.getElementById('btn').onclick = play;
function play() {
yt.playVideo();
}
The code works fine in JSFiddle, but when I put same thing in a text file and execute, the video is not playing. Please suggest me in this regard, Thanks in advance.
In the code, you are trying to access element via document.getElementById, which depends on where you write the <script> tag. Fiddle's script loading process or location may be different from normal browsers. As per your code, if the <script> tag is before <button>, then it will not work, where as if you put <script> after <object>, then it will work.
I modified your code as below which i was able to run successfully.
<html>
<head>
<script type="text/javascript">
function init() {
var yt = document.getElementById("yt");
document.getElementById('btn').onclick = play;
}
function play() {
yt.playVideo();
}
</script>
</head>
<body onload="init()">
<button id="btn">Play</button>
<object type="application/x-shockwave-flash" id="yt"
data="http://www.youtube.com/v/6eK-W32IME0?fs=1&enablejsapi=1&hl=en_US"
width="330" height="200">
<param name="allowScriptAccess" value="always"/>
</object>
</body>
</html>
Page has to be loaded via http protocol because of SOP reasons, browser will not allow access to player if loaded as file protocol
Related
I have a WordPress site with a page containing a video; I'd like this video to play automatically when the page is visited, and once the video has finished playing, I'd like a redirect to happen to a different page on my site.
I've followed the instruction from this post:
Redirect html5 video after play
But this doesn't seem to work for me and I can't figure out what I should do differently.
Here's the code currently on my page:
<script src="text/javascript">
function playVideo(){
var video = document.getElementById('addiction-video');
video.play();
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
}
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
Can anyone tell why it's not redirecting after the video has finished playing?
I have the above code directly in my WordPress page; I've tried placing the script below the html, and I've tried adding the script into my theme settings, but neither made it work.
Thank you!
Firstly change <script src="text/javascript"> to <script type="text/javascript"> since you are not importing an external script file. Read a bit about <script> tag.
Secondly you don't need the playVideo() function. Rewrite your code accordingly:
<script type="text/javascript">
var video = document.getElementById('addiction-video');
video.addEventListener('ended',function(){
location.href = 'http://mywordpresssite.com/addiction-a-call-for-connection-acim/';
});
</script>
<video id="addiction-video" autoplay="autoplay" controls="controls" width="600" height="300">
<source src="http://mywordpresssite.com/wp-content/uploads/2015/12/Addictions.mp4" type="video/mp4" />
</video>
You don't need video.play();, since you have autoplay="autoplay" attribute in <video> tag. Read about it here and try it yourself here.
Thirdly keep your browser console open while writing a js code.
Good Luck!
I'd like to open a SoundCloud player in a new window when a user clicks a link. Below is an example:
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
I've tried various tricks, but to no avail. If a user could point me in the right direction, it would be greatly appreciated.
Create something like: <a href='javascript:window.open("page.html")' target="_blank" >link</a> where you include the <object ../> tag in 'page.html'.
if you can dynamically generate the object with a complete html, you can use javascript:
window.open(URL,name,specs,replace)
Example of Server side script:
//playsound.php
<html>
<head>
.....
</head>
<body>
......
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
</body>
</html>
So if a user clicks on the link in the main window, another window pops up to play the media. I hope this helps
I am making a html webpage which needs to run ONLY LOCALLY(Offline Website). Using "input file tag", user selects and gives the video file path that needs to be played. For the video player I am using the Video tag of html.
I tried doing this with the below code but the video is not playing.
Please help me.
Note: It is an OFFLINE website.
CODE:
<html>
<head>
<script>
function func() {
var videolink = document.getElementById('fileID');
var player = document.getElementById('videoID');
var mp4Vid = document.getElementById('sourceID');
$(mp4Vid).attr('src',videolink);
player.load();
player.play();
}
</script>
</head>
<body>
<input type="file" id="fileID" />
<input type="button" onClick="func();"/>
<center>
<video id="videoID" width="320" height="240" controls autoplay>
<source id="sourceID" type="video/mp4">
</video>
</center>
</body>
</html>
try change this:
$(mp4Vid).attr('src',videolink);
on that:
$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));
You cannot with JavaScript alone, except on modern browsers.
The Issue
It's a Web browser security feature to obsure the full path of file uploads. If you attempt to read the value of a file upload field, you'll receive something like this:
$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"
Even if in this hypothetical the file exists on my desktop (e.g., ~/Desktop/some_file.mp4).
The Workaround
On modern browsers, see "In HTML5 how to show preview of image before upload?" for using FileReader on the file input and using its source. Otherwise, you can likely do so using Adobe Flash, where installed.
I would like to know how it is possible to add object tag to html5 video tag using using jquery or javascript
I tried by jquery but was unscuccessful (unable to view the video in IE8 and below browsers)
The below is my code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var configval= "config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}";
var $source = $('<object type="application/x-shockwave-flash" width="640" height="360">'+
'<param name="movie" value="http://api.html5media.info/1.1.5/flowplayer.swf" />'+
'<param name="flashVars" value="1" />'+
'</object>'+
'<p>need to install quick time player to play videos</p>');
$source.find('param[name="flashVars"]').attr('value', configval);
var $video = $('<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"></video>').append($source);
$('body').append($video);
})
</script>
I've edited my answer for the sake of simplicity, based upon Katana314's comment. I think this is what you're looking for. You were missing the video src inside of the video tag (you could also define multiple source video encodings using the source tag nested inside of video tag).
The way you were attempting to append the object tag inside of the video tag wasn't quite right, so you just need to do that, otherwise you were on the right track.
I don't have IE8 to test at the moment, but this should work:
<script type="text/javascript">
$(document).ready(function(){
var configval= "config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}";
var $source = $('<object type="application/x-shockwave-flash" width="640" height="360">'+
'<param name="movie" value="http://api.html5media.info/1.1.5/flowplayer.swf" />'+
'<param name="flashVars" value="1" />'+
'</object>'+
'<p>need to install quick time player to play videos</p>');
$source.find('param[name="flashVars"]').attr('value', configval);
//Added source of your video here
var $video = $('<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"></video>');
$('body').append($video);
//append source inside of the video tag
$('video').append($source);
})
</script>
I'm looking for a similar solution as well, unfortunately, I have yet to find any example where <object> could be integrated directly with a <video>. There is an easy way to get an <object>, details below. I was thinking maybe a canplaythrough and on error a fallback to this QT plugin.
You can use the QT plugin from the Safari Developer site.
Get the plugin
Use as an external script: <script src="ac_quicktime.js"></script>
Place the following script block wherever you want to embed the video:
<script>
QT_WriteOBJECT('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', '640', '360', '');
</script>
Wherever you want QuickTime content to appear in your webpage, place a line of JavaScript that calls the function QT_WriteOBJECT( ), passing the URL of the QuickTime content, the width and height of the display area, the preferred ActiveX version (typically left blank) and any optional QuickTime attributes.
...
At run time, this will generate the correct tags and insert them into your webpage. This example passes the URL http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4, the filename of a QuickTime movie in the same directory as the webpage. The allocated width is 640 pixels, and the allocated height is 360 pixels. The ActiveX version is left blank, so it defaults to the most recent version.
I have a youtube video embedded, just like this:
<object width="640" height="360">
<param name="movie" value="https://www.youtube.com/v/M7lc1UVf-VE?version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed>
</object>
Then I am replacing its src attribute using JS:
function replaceSrc()
{
document.getElementsByTagName("embed")[0].src = "new_link";
}
if (window.addEventListener){
window.addEventListener('load', replaceSrc, false);
} else if (window.attachEvent) {
window.attachEvent('onload', replaceSrc);
}
The function above will set a new src attribute, but it wont play a youtube video according to the new link. I need to make a reload of the youtube video in HTML with a newly set src attribute. Any suggestions? No YouTube API.
It isn't pretty but you could add a generated number as a href-suffix.
http://youtube.com/VideoOfACat?RandomVariable
Gets you a refreshed version of the clip
Basically you can put whatever you want after the ?, the browser still refreshes the link.
Simplest would perhaps be a global variable that get 1++ each reload.
I am answering my own question, and I want to give it as a warning for those having the same issue in the future: the posisition of your JS function matters!!
I have implemented such code
<script>
function replaceSrcc() {
var elem = document.getElementsByTagName("embed")[0];
copy = elem.cloneNode();
copy.src = "https://www.youtube.com/v/SKQeNnNT_Vg?version=3";
elem.parentNode.replaceChild(copy, elem);
}
if (window.addEventListener){
window.addEventListener('load', replaceSrcc, false);
} else if (window.attachEvent) {
window.attachEvent('onload', replaceSrcc);
}
</script>
Firstly, I put it into <head> tag, along with other JS functions defined for another stuff in my page. It did not work. Then, as a last option, I put it into <body> tag and now it works. Kind of crazy, however, it is a fact.