What is the process for having HTML open a hyperlink in a new window?

I am facing the following issue:

<p class="bigfont">
    <img width="4%" src="images/Youtube.png" class="float-left"/ >
    <a href="\\OC2-RMGFS\Public\Safety\runhidefight-eng.wmv" target="_blank" title="Response to an Active Shooter Emergency"><h6> FBI Video: Run. Hide. Fight. Surviving an Active Shooter Event</h6></a>
</p>

From what I understand, setting target="_blank" should display the video in a new window. However, it is opening in the Windows Media Player instead. I want the video to play in a window without any frame. How can I make that happen?

Answer №1

If you're trying to play a WMV video in a browser using the HTML5 video player, you may run into some compatibility issues. It's best to convert your video to a format like h264 (mpeg) or webm, which are better supported.

Additionally, consider creating a dedicated player.html page where you can customize settings such as autoplay and player controls. This way, you can also set up fallback options in case the browser doesn't support one format, it can switch to another.

To streamline the process, you can pass a query string parameter in the URL to specify which video should be loaded in the player page, eliminating the need for separate pages for each video.

Answer №2

Seems like there are a few issues that need addressing.

Guidance on Opening Links in a New Browser Tab

It's important to consider the user's preferences when opening links in a web browser. Altering the default behavior can be ethically questionable. It is best to allow users to choose how they want to open a link themselves.

However, if you absolutely need to force a link to open in a new browser window, the traditional method of using the target="_blank" attribute no longer works. Most modern browsers will open the link in a new tab instead. To achieve this, you can use the window.open() function, but use it sparingly and considerately.

If you do decide to implement this function, you can do so in a cleaner way by adding a class .new-window to the link, without resorting to intrusive onclick attributes:

(function(){
  var links = document.querySelectorAll('a.new-window');
  for (var i = 0; i < links.length; ++i) {
    links[i].addEventListener('click', function(e) {
      e.preventDefault();
      // Note that it'll not work inside SO snippets preview because of the sandbox!
      // Try on http://codepen.io/xerif/pen/JWggoJ
      window.open(this.getAttribute('href'), '', [
        'width=' + screen.availWidth,
        'height=' + screen.availHeight
      ]);
      // Also note that array will be converted to proper string automagically
      // I used array for readability
    });
  }
})();
<a href="http://stackoverflow.com/q/43333255">Normal link</a> / 
<a href="http://stackoverflow.com/q/43333255" target="_blank">Open in a new tab (probably)</a> /
<a href="http://stackoverflow.com/q/43333255" class="new-window">Open in a new window</a>

  ▲ Try it on codepen.io (snippets on SO are sandboxed)

It's important to note that using window.open should not trigger popup blockers if the action is initiated by the user. However, attempting to open a new window without direct user interaction, such as through a timer or keyboard event, may result in the popup being blocked.

Dealing with Unsupported Media Types

Contrary to popular belief, there is no native support for Windows Media Player in web environments. Instead, consider using the video tag for embedding videos on your website. If you are unable to upload training videos to YouTube, convert them to formats like webm or h.264 and use the video tag as follows:

<video src="\\OC2-RMGFS\Public\Safety\runhidefight-eng.mp4" poster="./images/Youtube.png">
  We can't play this video in your browser. Can you <a href="\\OC2-RMGFS\Public\Safety\runhidefight-eng.mp4" download>download it</a>?
</video>

Answer №3

target="_blank" is not a reliable method to consistently open a new window. It is ultimately up to the browser to determine whether it will open a new tab or a new window.

One workaround is to use window.open(), which will always open a new window instead of a tab if you include a width parameter:

window.open('https://www.google.com','','width=100')

If you don't include a width parameter, it may still open a new tab instead of a window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Confused about the path

After completing an AngularJS lesson, I encountered an issue where Angular was not able to understand links to the details page, such as template/1, when clicking on a link from the browser. However, when manually entering the URL in the address bar of the ...

From HTML element to pug-template with the use of the # symbol

I have a code snippet with 2 angular material radio buttons. Both of them contain the #attribute/element (I'm not sure what it's called) within them. How can I convert them into pug so that the attribute/element with the # works? Below is the sam ...

Optimal strategy for waiting until all service calls have completed and returned responses within an Angular controller

Is there a way in Angular to determine when all service calls have completed so that I can stop a loading bar in the controller? ...

Ways to create distinct identifiers within a recurring function:

I am using this function twice: function (data) { $.each(data.items, function(i,item) { var $items = $('<div class="col-sm-4 grid-item"><div class="thumbnail"><input type="checkbox" name="thing_'+i+'" ...

Defining types for functions that retrieve values with a specified default

My method aims to fetch a value asynchronously and return it, providing a default value if the value does not exist. async get(key: string, def_value?: any): Promise<any> { const v = await redisInstance.get(key); return v ? v : def_value; } W ...

Can I exclusively utilize named exports in a NextJS project?

Heads up: This is not a repeat of the issue raised on The default export is not a React Component in page: "/" NextJS I'm specifically seeking help with named exports! I am aware that I could switch to using default exports. In my NextJS ap ...

Dealing with Sequelize Errors

After reviewing the code provided, I am curious if it would be sufficient to simply chain one .catch() onto the outermost sequelize task rather than attaching it to each individual task, which can create a cluttered appearance. Additionally, I am wonderin ...

`Changing the output of a jQuery .load function`

I've created a webpage that pulls content from an article, but I'm looking to display only the first 100 words of the article. Currently, my page successfully loads the article using this code: $(function(){ $('#startOfArticle').l ...

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

What is the process for updating JSON using TextFields?

I am currently facing an issue with my TextFields displayed within a material-ui dialog. These TextFields are initially populated by JSON data, which you can see in the example below. The problem is that once the TextFields are populated, I am unable to up ...

Interactive Dropdown Menus for 3 Separate Database Tables

Having trouble creating a dependent drop-down list and would appreciate some help. The error "Undefined variable: input" keeps showing up in my code. https://i.sstatic.net/mBurS.pngFor the initial drop-down, I have 3 fixed options. <option value="busin ...

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Utilizing JSON data, I have successfully generated HTML content representing Questions and Multiple Choice Questions. My next goal is to capture user responses in an array after the submit button is clicked. This involves storing which radio button the use ...

Modify the background color of a specific bar across multiple charts when hovering or clicking - utilizing chart.js

I have multiple chart.js canvas elements on a webpage. The goal is to be able to quickly identify and highlight the same bar value across all the charts. For example, when I hover over a bar called "Thu" on the first chart, I want to automatically search f ...

What is the behavior of the JavaScript event loop when a Promise's resolution is tied to setTimeout?

console.log('1') setTimeout(() => { console.log('2') }, 0) function three() { return new Promise(resolve => { setTimeout(() => { return new Promise(resolve => resolve('3')) },0) ...

An uncaught error occurred in ReactJs while trying to read the property 'map' of an undefined variable within the {Component} component

As I pass my array to the props of the sidebar component and try to access it in my child component... After saving the code and checking the browser, an error message pops up: https://i.stack.imgur.com/6cPY8.png import React, { Component } from 're ...

What is the best way to conceal a CSS div through PHP if the div is empty?

I need some help refining my previous question to ensure clarity. Is there a straightforward method for hiding a div when it doesn't contain any information, without causing confusion for the client? This specific div receives information from Jooml ...

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

I need my navbar to be split into 12 sections so that each item occupies one section, starting from the far left of the screen. The current alignment doesn't meet this requirement as shown in the image below; https://i.sstatic.net/irYqV.png Despite ...

Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

I've been searching on the internet, but I got lost in complex explanations. I thought maybe someone here could help me out. :) I have a website with both mobile and desktop versions. Most of it looks good on different devices but there are some elem ...

Sending data in chunks using Vue.js

I'm interested in sending the data in chunks. Currently, what I send to the server looks like this: for loop - 1, 2, 3. However, the server receives it asynchronously as 3, 1, 2 and I need it to be received synchronously in the order of my for loop: 1 ...

Create a pop-up window within a single controller using Angular.js

I followed a tutorial to create this code. I am interested in learning how to utilize just one controller for generating the dialog box. Currently, I am using two controllers for this project. Any guidance or tips would be greatly appreciated. View my cod ...