Open html5

Question

I am interested in opening a video in a new window/tab using the tag, as I'm having intermittent issues with IE not being able to open linked .mp4 files. I have tried to cobble something in javascript together from other answers with my very flawed understanding, but I just can't make it work. Basically, I have videos, I want to be able to use this same code to reference them separately each time with a different link/button/picture and open them in a new window.

Here's my Attempt 1:

<script>
function nWin () {
    var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780,     height=200, top="+(screen.height-400)+", left="+(screen.width-840));
    win.document.body.innerHTML = "<html><body><video width="90% height="90%" controls><source src='myvideo.mp4' type="video/mp4">Your browser does not support the video tag.</video></body></html>"; 
} 
</script>

<a href="#" onClick="nWin()">Open</a>

Here's my Attempt 2:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#popup').click(function(e) {
        e.preventDefault();
        var w = window.open('about:blank', 'MyWindow', 'width=400,height=400');
        w.document.write('<html><body><video width="90% height="90%" controls><source src='myvideo.mp4' type="video/mp4">Your browser does not support the video tag.</video></body></html>');
        w.document.close();  
      })
    });
  </script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>

  <a id="popup" href="">Open me</a>
  
</body>
</html>

Maybe it is not possible to do this? Maybe I am missing something fundamental about functions. I thank you very sincerely in advance for your help.

Possible duplicate of [Add content to a new open window](https://stackoverflow.com/questions/10472927/add-content-to-a-new-open-window) — , Jun 01 '17 at 19:58
New window or a modal? Like a popup window, but you are basically still on the same page. — zer00ne, Jun 01 '17 at 20:02
Hi Natanel, I just took a look at that answer and I'm not sure how to make that work in this context--would I need to re-write code completely and have two different .html files that I save, upload, and then call? Thank you! — user2697568, Jun 01 '17 at 20:19
Hi Zer00ne, best case would be a new window, as we want the video to be watchable while people are looking at stuff in the original window. We are in a limited situation, too, as we are working with a Content Management System and therefore have just a "body" HTML-enabled window to work with. — user2697568, Jun 01 '17 at 20:20
@user2697568 Please take a look in my solution and let me know if this solved your problem — , Jun 02 '17 at 14:25

score 2 · Accepted Answer · 2017-06-02T16:03:08.057

2

If I understand your question, I think this can solve your problem:

HTML

<a href="#" onclick="open_in_new_window('html_contents', 'MyTitle', 'location=1,status=1,toolbar=1,scrollbars=1,resizeable=1,width=500,height=250');">Open New Window</a>
<div id="html_contents" data-new-window> <!-- data-new-window is important -->
    <video controls style="width: 100%; height: auto;">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
</div>

CSS

[data-new-window] {
    display: none;
}

JavaScript

function open_in_new_window(id, new_page_title, features) {
    var new_window;

    if(features !== undefined && features !== '') {
    new_window = window.open('', '_blank', features);
    }
    else {
        new_window = window.open('', '_blank');
    }

    var html_contents = document.getElementById(id);
    if(html_contents !== null) {
        new_window.document.write('<!doctype html><html><head><title>' + new_page_title + '</title><meta charset="UTF-8" /></head><body>' + html_contents.innerHTML + '</body></html>');
    }
}

Explanation

#html_contents stores the new page contents (<video>), to make it easier for you (instead of writing the entire page in javascript). The function needs the parameter features to define the new window (like in the window.open() function). you just need to call this function, and if the features are defined, it will be opened in a new window. if not, it'll be opened in a new tab (or any other way that defined by the browser).

CSS will hide #html_contents in the main window who calls this function.

Original Fiddle

I hope it will be helpful

edited Jun 02 '17 at 16:03

answered Jun 02 '17 at 14:20

This is absolutely helpful, you are amazing, but it isn't working for me, as I left out some info in my original question--there will be multiple videos on the same site, and I need to be able to add the code for each video (with a separate link for each) to the separate HTML-enabled "body" fields (content management system) and have each of the videos load from the different links on the same page. I unfortunately can't put the CSS or Javascript into the overarching page. – user2697568 Jun 02 '17 at 15:32
@user2697568 You can make it for multiple windows and elements if you want - i'll edit my code and show you how to do it. but what do you mean by "it isn't working for me"? – Jun 02 '17 at 15:50
That is all I mean--it is working, just didn't work for my situation because I needed it for multiple videos/multiple links on the same page. You are my superhero!! – user2697568 Jun 02 '17 at 15:58
@user2697568 [Is that what you tried to do](http://jsbin.com/pesurawofe/edit?html,css,js,output)? (code updated here too) – Jun 02 '17 at 16:00
About inserting css (and javascript) to the new page: you can, but it's a little bit complicated - just insert it through the javascript code. you can make a parameter which can be called "css" and then insert there the stylesheet. e.g.: `your_function(css)` and in the function: `......`. Don't forget to escape characters while you're inserting html tags to your javascript: `"
"` and NOT `"
`
– Jun 02 '17 at 16:07
Update: [Try it with CSS & JavaScript](http://jsbin.com/bimelejuxu/1/edit?html,css,js,output) – Jun 02 '17 at 16:18
1

Thank you so much @natanel97, that was exactly perfect, and I learned a lot in the process, too. Thank you! – user2697568 Jun 02 '17 at 16:19
You're welcome! it will be very appreciated if you'll accept this answer. thanks :-) – Jun 02 '17 at 16:21
Thanks again so much for your help, @natanelg97! If I wanted the videos to each open in the SAME window, would it be ridiculously complicated? That is, if I click on a different link, it will simply open that next video in the SAME window? Thank you! – user2697568 Oct 23 '17 at 16:48

Open html5 tag content (including video!) in new window

1 Answers1

Open html5