cloudinary-video-player 1.5.5 → 1.5.9

package/src/components/interaction-area/interaction-area.service.js

@@ -0,0 +1,225 @@
+import videojs from 'video.js';
+import {
+  CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+  DEFAULT_INTERACTION_ARE_TRANSITION,
+  INTERACTION_AREAS_CONTAINER_CLASS_NAME, TEMPLATE_INTERACTION_AREAS_VTT
+} from './interaction-area.const';
+import {
+  createInteractionAreaLayoutMessage,
+  getInteractionAreaItem,
+  getZoomTransformation,
+  removeInteractionAreasContainer,
+  setInteractionAreasContainer,
+  setInteractionAreasContainerSize,
+  shouldShowAreaLayoutMessage,
+  updateInteractionAreasItem
+} from './interaction-area.utils';
+import { addEventListener, createElement } from '../../utils/dom';
+import { throttle } from '../../utils/time';
+import { get } from '../../utils/object';
+import { noop } from '../../utils/type-inference';
+import { addMetadataTrack } from '../../video-player.utils';
+
+
+export const interactionAreaService = (player, playerOptions, videojsOptions) => {
+
+  let firstPlayed = false;
+  let isZoomed = false;
+  let currentTrack = null;
+  let unZoom = noop;
+
+  const shouldLayoutMessage = () => shouldShowAreaLayoutMessage(videojsOptions.interactionDisplay);
+
+  function isInteractionAreasEnabled(enabled = false) {
+    const interactionAreasConfig = getInteractionAreasConfig();
+    return enabled || (interactionAreasConfig && interactionAreasConfig.enable);
+  }
+
+  function setAreasPositionListener() {
+    currentTrack && player.videojs.removeRemoteTextTrack(currentTrack);
+
+    const isEnabled = isInteractionAreasEnabled();
+    const interactionAreasConfig = getInteractionAreasConfig();
+
+    if (!isEnabled || isZoomed) {
+      return null;
+    }
+
+    if (Array.isArray(interactionAreasConfig.template)) {
+      addInteractionAreasItems(interactionAreasConfig.template);
+      setContainerSize();
+    } else {
+      const vttUrl = interactionAreasConfig.vttUrl || TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];
+
+      if (vttUrl) {
+        currentTrack = addMetadataTrack(player.videojs, vttUrl);
+        addCueListener(currentTrack);
+      }
+    }
+  }
+
+  function setGoBackButton() {
+    const button = createElement('div', { 'class': 'go-back-button' });
+
+    button.addEventListener('click', () => {
+      unZoom();
+    }, false);
+
+    const tracksContainer = createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, button);
+    setInteractionAreasContainer(player.videojs, tracksContainer);
+  }
+
+  function getInteractionAreasConfig() {
+    const { cldSrc } = player.videojs.currentSource();
+    return cldSrc && cldSrc.getInteractionAreas();
+  }
+
+  function removeLayoutMessage() {
+    removeInteractionAreasContainer(player.videojs);
+    setAreasPositionListener();
+    player.play();
+  }
+
+  function setLayoutMessage() {
+    if (!isInteractionAreasEnabled()) {
+      return;
+    }
+
+    if (shouldLayoutMessage()) {
+      let layoutMessageTimout = null;
+      const showItAgainCheckbox = get(videojsOptions, 'interactionDisplay.layout.showAgain', false);
+      player.pause();
+
+      createInteractionAreaLayoutMessage(player.videojs, () => {
+        clearTimeout(layoutMessageTimout);
+        removeLayoutMessage();
+      }, showItAgainCheckbox);
+
+      if (!showItAgainCheckbox) {
+        layoutMessageTimout = setTimeout(removeLayoutMessage, CLOSE_INTERACTION_AREA_LAYOUT_DELAY);
+      }
+    } else {
+      removeLayoutMessage();
+    }
+  }
+
+  function init() {
+
+    if (isInteractionAreasEnabled()) {
+
+      player.videojs.el().classList.add('interaction-areas');
+
+      player.videojs.one('play', () => {
+        firstPlayed = true;
+        setLayoutMessage();
+      });
+
+      player.videojs.on('sourcechanged', () => {
+        firstPlayed && setAreasPositionListener();
+      });
+
+      const setInteractionAreasContainerSize = throttle(setContainerSize, 100);
+
+      player.videojs.on('fullscreenchange', () => {
+        // waiting for fullscreen will end
+        setTimeout(setInteractionAreasContainerSize, 100);
+      });
+
+      const resizeDestroy = addEventListener(window, 'resize', setContainerSize, false);
+
+      player.videojs.on('dispose', resizeDestroy);
+    }
+
+    player.videojs.on('ended', () => {
+      unZoom();
+    });
+  }
+
+  function onZoom(src, newOption, item) {
+    const currentSource = player.videojs.currentSource();
+    const { cldSrc } = currentSource;
+    const currentSrcOptions = cldSrc.getInitOptions();
+    const option = newOption || { transformation: currentSrcOptions.transformation.toOptions() };
+    const transformation = !src && getZoomTransformation(player.videoElement, item);
+    const sourceOptions = transformation ? videojs.mergeOptions({ transformation }, option) : option;
+
+    const newSource = cldSrc.isRawUrl ? currentSource.src : { publicId: cldSrc.publicId() };
+    player.source(transformation ? { publicId: cldSrc.publicId() } : src, sourceOptions).play();
+
+    isZoomed = true;
+
+    setGoBackButton();
+
+    unZoom = () => {
+      if (isZoomed) {
+        isZoomed = false;
+        player.source(newSource, currentSrcOptions).play();
+      }
+    };
+  }
+
+  function onInteractionAreasClick({ event, item, index }) {
+    const interactionAreasConfig = getInteractionAreasConfig();
+
+    interactionAreasConfig.onClick && interactionAreasConfig.onClick({
+      item,
+      index,
+      event,
+      zoom: (source, option) => {
+        onZoom(source, option, item);
+      }
+    });
+  }
+
+  function addInteractionAreasItems(interactionAreasData, previousInteractionAreasData, durationTime = 0) {
+    const configs = { playerOptions: playerOptions, videojsOptions: videojsOptions };
+
+    if (previousInteractionAreasData) {
+      updateInteractionAreasItem(player.videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onInteractionAreasClick);
+    } else {
+      const interactionAreasItems = interactionAreasData.map((item, index) => {
+        return getInteractionAreaItem(configs, item, index, durationTime, (event) => {
+          onInteractionAreasClick({ event, item, index });
+        });
+      });
+
+      setInteractionAreasContainer(player.videojs, createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, interactionAreasItems));
+    }
+  }
+
+  function setContainerSize() {
+    if (isInteractionAreasEnabled()) {
+      setInteractionAreasContainerSize(player.videojs, player.videoElement);
+    }
+  }
+
+  function addCueListener(track) {
+    if (!track) {
+      return;
+    }
+
+    let previousTracksData = null;
+
+    track.addEventListener('cuechange', () => {
+      const activeCue = track.activeCues && track.activeCues[0];
+
+      if (activeCue) {
+        const durationTime = Math.max(Math.floor((activeCue.endTime - activeCue.startTime) * 1000), DEFAULT_INTERACTION_ARE_TRANSITION);
+
+        const tracksData = JSON.parse(activeCue.text);
+
+        addInteractionAreasItems(tracksData, previousTracksData, durationTime);
+        !previousTracksData && setContainerSize();
+        previousTracksData = tracksData;
+      } else {
+        removeInteractionAreasContainer(player.videojs);
+        previousTracksData = null;
+      }
+    });
+  }
+
+  return {
+    init
+  };
+
+};

package/src/components/interaction-area/interaction-area.utils.js

@@ -0,0 +1,236 @@
+import { elementsCreator, styleElement } from '../../utils/dom';
+import { get } from '../../utils/object';
+import {
+  CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+  INTERACTION_AREA_HAND_ICON,
+  INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME,
+  INTERACTION_AREAS_CONTAINER_CLASS_NAME,
+  INTERACTION_AREAS_PREFIX,
+  INTERACTION_AREAS_THEME
+} from './interaction-area.const';
+import { noop } from '../../utils/type-inference';
+import { getDefaultPlayerColor } from '../../plugins/colors';
+import { forEach, some } from '../../utils/array';
+import { themedButton } from '../themeButton/themedButton';
+import { BUTTON_THEME } from '../themeButton/themedButton.const';
+
+
+const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
+
+export const getInteractionAreaItem = ({ playerOptions, videojsOptions }, item, index, durationTime, onClick) => {
+  const defaultColor = getDefaultPlayerColor(videojsOptions);
+  const accentColor = playerOptions && playerOptions.colors ? playerOptions.colors.accent : defaultColor.accent;
+
+  // theme = 'pulsing' / 'shadowed'
+  const theme = get(videojsOptions, 'interactionDisplay.theme.template', INTERACTION_AREAS_THEME.PULSING);
+
+  return elementsCreator({
+    tag: 'div',
+    attr: { class: `${INTERACTION_AREAS_PREFIX}-item theme-${theme}`, 'data-id': getInteractionAreaItemId(item, index) },
+    style: {
+      left: `${item.left}%`,
+      top: `${item.top}%`,
+      width: `${item.width}%`,
+      height: `${item.height}%`,
+      transitionDuration: `${durationTime}ms`
+    },
+    event: {
+      name: 'click',
+      callback: onClick
+    },
+    children: [
+      {
+        tag: 'div',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-area-marker` },
+        children: [
+          {
+            tag: 'div',
+            attr: { class: `${INTERACTION_AREAS_PREFIX}-marker-shadow` },
+            style: { [theme === INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor }
+          },
+          {
+            tag: 'div',
+            attr: { class: `${INTERACTION_AREAS_PREFIX}-marker-main` },
+            style: { borderColor: accentColor }
+          }
+        ]
+      }
+    ]
+  });
+};
+
+
+export const percentageToFixedValue = (outOf, value) => (outOf / (100 / +value));
+
+export const getZoomTransformation = (videoElement, interactionAreaItem) => {
+
+  const { videoHeight, videoWidth } = videoElement;
+
+  const itemX = percentageToFixedValue(videoWidth, interactionAreaItem.left);
+  const itemY = percentageToFixedValue(videoHeight, interactionAreaItem.top);
+  const itemWidth = percentageToFixedValue(videoWidth, interactionAreaItem.width);
+  const itemHeight = percentageToFixedValue(videoHeight, interactionAreaItem.height);
+
+  const videoAspectRatio = videoWidth / videoHeight;
+  const itemAspectRatio = itemWidth / itemHeight;
+
+  const width = Math.round(itemAspectRatio > 1 || videoAspectRatio > 1 ? itemHeight * itemAspectRatio : itemWidth);
+  const height = Math.round(width / videoAspectRatio);
+
+  const x = Math.round(itemX - (width - itemWidth) / 2);
+  const y = Math.round(itemY - (height - itemHeight) / 2);
+
+  return {
+    width,
+    height,
+    x: Math.min(Math.max(x, 0), videoWidth - width),
+    y: Math.min(Math.max(y, 0), videoHeight - height),
+    crop: 'crop'
+  };
+};
+
+
+export const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) => {
+  const currentInteractionAreasContainer = getInteractionAreasContainer(videojs);
+
+  if (currentInteractionAreasContainer) {
+    currentInteractionAreasContainer.replaceWith(newInteractionAreasContainer);
+  } else {
+    // do not use element.append for ie11 support
+    videojs.el().appendChild(newInteractionAreasContainer);
+  }
+};
+
+const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);
+
+
+export const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
+  const interactionAreasContainer = getInteractionAreasContainer(videojs);
+
+  forEach(interactionAreasData, (item, index) => {
+    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
+    const itemId = getInteractionAreaItemId(item);
+    const isExistItem = some(previousInteractionAreasData, i => getInteractionAreaItemId(i) === itemId);
+
+    // in case the element of the item is in the dom and exist in the previous data , it update the element position
+    if (isExistItem && itemElement) {
+      styleElement(itemElement, {
+        left: `${item.left}%`,
+        top: `${item.top}%`,
+        width: `${item.width}%`,
+        height: `${item.height}%`,
+        transitionDuration: `${durationTime}ms`
+      });
+      // if the element did not exist before , not in the dom and not in the previous data , it add a new element
+    } else if (!isExistItem && !itemElement) {
+      // do not use element.append for ie11 support
+      interactionAreasContainer.appendChild(getInteractionAreaItem(configs, item, index, durationTime, (event) => {
+        onClick({ event, item, index });
+      }));
+    }
+  });
+
+  // checking the previous data for element that should be removed if not exist in the new data object.
+  forEach(previousInteractionAreasData, (item, index) => {
+    const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);
+    const itemId = getInteractionAreaItemId(item);
+    const shouldBeRemoved = !some(interactionAreasData, i => getInteractionAreaItemId(i) === itemId);
+
+    if (itemElement && shouldBeRemoved) {
+      // do not use element.remove for ie11 support
+      itemElement.parentNode.removeChild(itemElement);
+    }
+  });
+
+};
+
+export const shouldShowAreaLayoutMessage = (interactionAreasConfig) => {
+  const isLayoutEnabled = get(interactionAreasConfig, 'layout.enable', true);
+
+  return isLayoutEnabled && localStorage.getItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME) !== 'true';
+};
+
+
+const onClickInteractionAreaLayoutClick = (checked, onClick = noop) => {
+  localStorage.setItem(INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, JSON.parse(checked));
+  onClick();
+};
+
+export const createInteractionAreaLayoutMessage = (videojs, onClick, showItAgainCheckbox = false) => {
+
+  let checked = false;
+
+  const id = `checkbox_${Math.round(Math.random() * 10000)}`;
+
+  const tracksContainer = elementsCreator({
+    tag: 'div',
+    attr: { class: `${INTERACTION_AREAS_CONTAINER_CLASS_NAME} ${INTERACTION_AREAS_PREFIX}-layout-message ${showItAgainCheckbox ? '' : 'clickable'}` },
+    onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
+    children: [
+      {
+        tag: 'img',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-icon`, src: INTERACTION_AREA_HAND_ICON }
+      },
+      {
+        tag: 'h3',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-message-title` },
+        children: 'Tap on dots to zoom for a product.'
+      },
+      themedButton({
+        text: 'Got it',
+        theme: BUTTON_THEME.TRANSPARENT_WHITE,
+        loadingDelay: showItAgainCheckbox ? 0 : CLOSE_INTERACTION_AREA_LAYOUT_DELAY,
+        onClick: showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null
+      }),
+      showItAgainCheckbox && {
+        tag: 'div',
+        attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-message-do-not-show` },
+        children: [
+          {
+            tag: 'input',
+            attr: { type: 'checkbox', class: `${INTERACTION_AREAS_PREFIX}-layout-message-checkbox`, id },
+            event: {
+              name: 'input',
+              callback: (event) => {
+                checked = event.target.checked;
+              }
+            }
+          },
+          {
+            tag: 'label',
+            attr: { class: `${INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`, for: id },
+            children: 'Don׳t show it again'
+          }
+        ]
+      }
+    ].filter(i => i)
+  });
+
+  setInteractionAreasContainer(videojs, tracksContainer);
+};
+
+const getInteractionAreasContainer = (videojs) => videojs.el().querySelector(`.${INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
+
+export const removeInteractionAreasContainer = (videojs) => {
+  const interactionAreasContainer = getInteractionAreasContainer(videojs);
+
+  // do not use element.remove for ie11 support
+  interactionAreasContainer && interactionAreasContainer.parentNode.removeChild(interactionAreasContainer);
+};
+
+export const setInteractionAreasContainerSize = (videojs, videoElement) => {
+
+  const interactionAreasContainer = getInteractionAreasContainer(videojs);
+
+  if (!interactionAreasContainer) {
+    return;
+  }
+
+  const { videoHeight, videoWidth } = videoElement;
+  const videoAspectRatio = videoWidth / videoHeight;
+
+  const width = videoAspectRatio * videoElement.clientHeight;
+
+  interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;
+  interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';
+};

package/src/components/logoButton/logo-button.js

@@ -1,23 +1,20 @@
 import videojs from 'video.js';
 import './logo-button.scss';
 import { DARK_BG_ICON, LIGHT_BG_ICON } from './logo-button.const';
+import { isLight } from '../../video-player.utils';
 
 // support VJS5 & VJS6 at the same time
 const ClickableComponent = videojs.getComponent('ClickableComponent');
 
 class LogoButton extends ClickableComponent {
 
-  static isLight(opts) {
-    return opts.class.indexOf('cld-video-player-skin-light') > -1 || opts.skin === 'light';
-  }
-
   createEl() {
     const opts = this.options_.playerOptions;
     const display = opts.showLogo ? 'block' : 'none';
 
-    const isLight = LogoButton.isLight(opts) ? LIGHT_BG_ICON : DARK_BG_ICON;
+    const _isLight = isLight(opts) ? LIGHT_BG_ICON : DARK_BG_ICON;
 
-    const bgIcon = opts.logoImageUrl ? opts.logoImageUrl : isLight;
+    const bgIcon = opts.logoImageUrl ? opts.logoImageUrl : _isLight;
 
     return videojs.dom.createEl('a', {}, {
       class: 'vjs-control vjs-cloudinary-button vjs-button',

package/src/components/themeButton/themedButton.const.js

@@ -0,0 +1,3 @@
+export const BUTTON_THEME = {
+  TRANSPARENT_WHITE: 'transparent-white'
+};

package/src/components/themeButton/themedButton.js

@@ -0,0 +1,25 @@
+import { elementsCreator } from '../../utils/dom';
+
+
+export const themedButton = ({ text, onClick, theme = '', loadingDelay = 0 }) => {
+  return elementsCreator({
+    tag: 'button',
+    attr: { class: `vp-theme-button theme-${theme}` },
+    onClick,
+    children: [
+      {
+        tag: 'div',
+        attr: { class: 'vp-loading-bar' },
+        style: {
+          'animation-duration': `${loadingDelay}ms`
+        }
+      },
+      {
+        tag: 'div',
+        attr: { class: 'content' },
+        children: text
+      }
+    ]
+  });
+};
+

package/src/config/defaults.js

@@ -1,4 +1,5 @@
 import contextMenuContent from '../plugins/context-menu/contextMenuContent';
+import { FLOATING_TO, PRELOAD } from '../video-player.const';
 
 export default {
   logoOnclickUrl: 'https://cloudinary.com/',
@@ -9,7 +10,7 @@ export default {
   controlBar: {
     'pictureInPictureToggle': false
   },
-  preload: false,
+  preload: PRELOAD.AUTO,
   loop: false,
   muted: false,
   posterOptions: {},
@@ -17,7 +18,7 @@ export default {
   contextMenu: {
     content: contextMenuContent
   },
-  floatingWhenNotVisible: false,
+  floatingWhenNotVisible: FLOATING_TO.NONE,
   hideContextMenu: false,
   analytics: false,
   playedEventPercents: [25, 50, 75, 100]

package/src/extended-events.js

@@ -86,6 +86,9 @@ class ExtendedEvents extends EventEmitter {
 
         if (Math.abs(_seekStart - _seekEnd) > 1) {
           _seeking = true;
+
+          // should empty  _timesTracked array on seek, needed for 'timeplayed' event
+          resetPerVideoState();
           _emit('seek', { seekStart: _seekStart, seekEnd: _seekEnd });
         }
       }

package/src/plugins/cloudinary/common.js

@@ -178,17 +178,25 @@ const h264avcToString = (s) => {
   return s;
 };
 
+export const VIDEO_CODEC = {
+  VP9: 'vp9',
+  HEV1: 'hev1',
+  H265: 'h265',
+  H264: 'h264'
+};
+
 const codecToSrcTransformation = (codec) => {
   if (!codec) {
     return {};
   }
+
   switch (codec) {
-    case 'vp9':
-      return { video_codec: 'vp9' };
-    case 'hev1':
-      return { video_codec: 'h265' };
-    case 'h264':
-      return { video_codec: 'h264:baseline:3.0' };
+    case VIDEO_CODEC.VP9:
+      return { video_codec: VIDEO_CODEC.VP9 };
+    case VIDEO_CODEC.HEV1:
+      return { video_codec: VIDEO_CODEC.H265 };
+    case VIDEO_CODEC.H264:
+      return { video_codec: `${VIDEO_CODEC.H264}:baseline:3.0` };
     default:
       return { video_codec: h264avcToString(codec) };
   }

package/src/plugins/cloudinary/models/video-source/video-source.js

@@ -4,7 +4,6 @@ import { normalizeOptions, isSrcEqual } from '../../common';
 import { sliceAndUnsetProperties } from 'utils/slicing';
 import { assign } from 'utils/assign';
 import { objectToQuerystring } from 'utils/querystring';
-import { isKeyInTransformation } from 'utils/cloudinary';
 import { default as vjs } from 'video.js';
 import {
   CONTAINER_MIME_TYPES,
@@ -13,7 +12,8 @@ import {
   URL_PATTERN,
   VIDEO_SUFFIX_REMOVAL_PATTERN
 } from './video-source.const';
-import { formatToMimeTypeAndTransformation, normalizeFormat } from './video-source.utils';
+import { formatToMimeTypeAndTransformation, isCodecAlreadyExist, normalizeFormat } from './video-source.utils';
+import { castArray } from '../../../../utils/array';
 
 let objectId = 0;
 
@@ -68,6 +68,7 @@ class VideoSource extends BaseSource {
     this._interactionAreas = null;
     this._type = 'VideoSource';
     this.isRawUrl = isRawUrl;
+    this._rawTransformation = options.raw_transformation;
     this.withCredentials = !!withCredentials;
     this.getInitOptions = () => initOptions;
 
@@ -170,41 +171,44 @@ class VideoSource extends BaseSource {
 
   generateSources() {
     if (this.isRawUrl) {
-      let type = this.sourceTypes().length > 1 ? null : this.sourceTypes()[0];
+      const type = this.sourceTypes().length > 1 ? null : this.sourceTypes()[0];
       return [this.generateRawSource(this.publicId(), type)];
     }
-    let isIe = typeof navigator !== 'undefined' && (/MSIE/.test(navigator.userAgent) || /Trident\//.test(navigator.appVersion));
-    let srcs = this.sourceTypes().map((sourceType) => {
+
+    const srcs = this.sourceTypes().map((sourceType) => {
       const srcTransformation = this.sourceTransformation()[sourceType] || this.transformation();
       const format = normalizeFormat(sourceType);
       const isAdaptive = (['mpd', 'm3u8'].indexOf(format) !== -1);
       const opts = {};
 
       if (srcTransformation) {
-        opts.transformation = Array.isArray(srcTransformation) ? srcTransformation : [srcTransformation];
+        opts.transformation = castArray(srcTransformation);
       }
 
       assign(opts, { resource_type: 'video', format });
 
-      const hasCodecSrcTrans = (isKeyInTransformation(opts.transformation, 'video_codec') || isKeyInTransformation(opts.transformation, 'streaming_profile'));
       const [type, codecTrans] = formatToMimeTypeAndTransformation(sourceType);
+
       // If user's transformation include video_codec then don't add another video codec to transformation
-      if (codecTrans && !hasCodecSrcTrans) {
+      if (codecTrans && !isCodecAlreadyExist(opts.transformation, this._rawTransformation)) {
         opts.transformation.push(codecTrans);
       }
+
       if (opts.format === 'auto') {
         delete opts.format;
       }
 
-      let queryString = this.queryParams() ? objectToQuerystring(this.queryParams()) : '';
+      const queryString = this.queryParams() ? objectToQuerystring(this.queryParams()) : '';
 
-      let src = this.config().url(this.publicId(), opts);
+      const src = this.config().url(this.publicId(), opts);
       // if src is a url that already contains query params then replace '?' with '&'
-      src += src.indexOf('?') > -1 ? queryString.replace('?', '&') : queryString;
+      const params = src.indexOf('?') > -1 ? queryString.replace('?', '&') : queryString;
 
-      return { type, src, cldSrc: this, isAdaptive: isAdaptive, withCredentials: this.withCredentials };
+      return { type, src: src + params, cldSrc: this, isAdaptive: isAdaptive, withCredentials: this.withCredentials };
     });
 
+    const isIe = typeof navigator !== 'undefined' && (/MSIE/.test(navigator.userAgent) || /Trident\//.test(navigator.appVersion));
+
     if (isIe) {
       return srcs.filter(s => s.type !== 'video/mp4; codec="hev1.1.6.L93.B0"');
     } else if (vjs.browser.IS_ANY_SAFARI) {