Utilizing ECMA 5 code within Internet Explorer 8

My current code includes the use of hls.js for playing hls streams. The original code is in ECMA version 6 and then transpiled into ECMA 5, which can be found in the dist folder (link provided). It works fine in most cases.

However, when trying to render it on Internet Explorer 8, syntax errors are encountered. I do not intend to utilize any functions from the library, just include it. Should I attempt to transpile the js file for compatibility with IE8 or should I look for alternatives?

EDIT

I attempted following suggestions from this source by including various shim scripts as below:

<html>
<h1> Testing IE new </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"></script>
<script src="https://wzrd.in/standalone/es7-shim@latest"></script>

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>

</html>

Despite this setup, the error persists in IE8 stating:

Expected identifier  hls.js, line 320 character 31

EDIT 2

To address this issue, I created a .babelrc file to transpile it into an es3 format and resolve additional issues:

{
  "presets": ["es3"],
  "plugins": ["transform-es3-property-literals", "transform-es3-member-expression-literals"]
}

However, a new error has emerged in IE8:

Object doesn't support this property or method  hls.js, line 1063 character 17

The problem seems to be with the Object.defineProperty method, which IE8 does not support. Is there a solution to fix this?

Answer №1

It seems that older versions of Internet Explorer have trouble with the property name default, treating it as a reserved word when used on an object. To address this issue, you would need to reach out to hls and request a different name for the property or use it in quotes like exp['default']

However, they mention.

Compatibility

hls.js is compatible with browsers that support MSE with 'video/MP4' inputs. Currently, it works on:

Chrome for Android (version 34+)

Chrome for Desktop (version 34+)

Firefox for Android (version 41+)

Firefox for Desktop (version 42+)

IE11+ for Windows 8.1

Safari for Mac (version 8+) - beta version

I'm not sure if there's a transpiler available that can convert this into something that won't cause problems in older IE versions. Maybe there is.

Babel 6.0.20 Modules feature not work in IE8

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

What is the best way to transfer an item to another fixed object using THREE.JS?

Having just started out, I've managed to create a scene, renderer, camera, and two objects in THREE.JS. Now I'm trying to figure out how to move one object to another object. I've tried a few things but haven't had much success. Any gui ...

Update an array of objects by incorporating additional properties from another array, even if the two arrays are of different lengths. When the iteration of the array is complete, it should

Is there a way to merge two arrays of objects with different keys? I want to combine the keys of the second array with those of the first one. How can I accomplish this task? $scope.links = [ { name: 'JRD', status: 'active ...

After closing and reopening the jQuery modal, the name does not appear

I crafted a custom modal window to display images along with comments and the owner's name. The issue arises when I close the current modal and reopen it; the owner's name disappears. Oddly enough, the name is displayed the first time the modal i ...

What is the best way to incorporate npm packages into my projects?

Lately, I've been heavily relying on nodejs, but I keep running into the same issue. With so many projects available and a plethora of npm packages to choose from, it's frustrating that every time I try npm install --save some-package, I struggle ...

Storing images in Firebase using React JS upon form submission

I've been attempting to upload an image to firebase storage using the following code: const firebase = useFirebase(); const handleSubmit = e => { e.preventDefault(); // state.title && dispatch(createItems(state)); ...

Obtaining a File type object from a URL (specifically an image) in Vue.js

Suppose I have an image URL like http://localhost/sample.jpg. What is the best way to save this image URL into a File object using native JavaScript API in my component? export default { created () { const imageUrl = 'http://localhost/sample.jpg ...

The data point on jqPlot does not display in full

I've been working on creating a chart with jqPlot to display data for each hour. It's mostly going well, but there's an issue where the first and last data points are not showing correctly - part of the circle is getting cut off. Here' ...

Creating a stylish Go URL bar using HTML and CSS

Looking for some guidance in JavaScript as I am new to it. I want to create a go bar similar to the ones found at the top of browsers using HTML and JS. When the button is clicked, it should navigate to the URL entered in the box. Here's an example of ...

Automatically navigate to a specific selection within the Autocomplete feature

Imagine having a dropdown or Autocomplete list in Material-UI with a long list of items. How can you make the list automatically scroll to a specific item when you open the dropdown? For instance, if we take the list of top100Films, the initial displayed i ...

The toISOString() method is deducting a day from the specified value

One date format in question is as follows: Tue Oct 20 2020 00:00:00 GMT+0100 (Central European Standard Time) After using the method myValue.toISOString();, the resulting date is: 2020-10-19T23:00:00.000Z This output shows a subtraction of one day from ...

Expanding the functionality of Element.prototype, problem related to anchor

Consider the following code: A JavaScript (JS) Snippet Element.prototype.changeInnerText = function(str) { this.textContent = str; return this; } let divElement = document.createElement('div').changeInnerText('new div text'); / ...

What is the best way to send $(this) to a function?

Here is my code snippet: $(document).ready(function(){ var hCount = 0, eCount = 0, nCount = 0, mCount = 0; $("#head").click(function() { var pPos = calculatePosition(hCount); $(this).animate({left:pPos+"px"}, ...

Interactive navigation through scrolling with PHP onchange event

I need help with a PHP-related issue. I have a list of products that are generated dynamically using PHP. When a user clicks on one of the items in the list, the products are sorted. I also want the user to be smoothly scrolled to a new section of the page ...

When is it more advantageous to use Next.js instead of plain React?

As someone who is new to the world of React, I've dabbled in creating simple web applications using the React library and the convenient create-react-app command with npx. However, I've come to realize that the Client Side Render (CSR) applicatio ...

Decoding a formatted string

Here is a string that needs parsing: const str = 'map("a")to("b");map("foo")to("bar");map("alpha")to("beta");' The goal is to generate a JSON structure like this: [{id: 'a', map: 'b'}, {id: 'foo', map: 'bar&a ...

What could be the reason that Ng Repeat fails to work when a button is triggered from a separate form

I have an HTML table that includes an ng repeat directive and two buttons. The first button opens a modal with a form to create a new user. When I click save, it adds the new user to the list. The second button is within the same form and also adds a user. ...

Analyzing the similarities in properties between two arrays of objects in order to generate a pair of fresh arrays

I have two sets of data represented as arrays: var oldOrder = [{"Id": "10","Qty": 1}, {"Id": "3","Qty": 2}, {"Id": "9","Qty": 2}]; var newOrder = [{"Id": & ...

Storing email addresses in variables and sending them using node.js

const functions = require('firebase-functions'); var nodemailer = require('nodemailer'); var transporter=nodemailer.createTransport('smtps://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dca9afb9aeb2b ...

What is the best way to export image paths using require() from a single index.js file in a React Native project?

I am looking for a way to efficiently export all images from a single file named index.js, so that in the future, if I need to change the path of an image, I only have to make changes in one file. For example: export {default as avatar} from './avata ...

A computer program designed to determine a series of numbers needed to complete a square grid

Given the numbers 1, 2, 3, 4, 5, 6, 7, 8, I am seeking to replace the x's in such a way that each side adds up to the number in the center. *-*---*-* |x| x |x| *-*---*-* |x| 12|x| *-*---*-* |x| x |x| *-*---*-* Initially, I have iterated over the num ...