Convert MP4 to DASH

2024-10-30 20:25 UTC gpt-4o Open in ChatGPT ↗

To convert an MP4 video to DASH format and prepare it for hosting on your webpage, follow these steps:

1. Convert MP4 to DASH using FFmpeg

To convert your MP4 video to DASH format, you can use FFmpeg, a powerful media processing tool. Here’s how to do it:

Install FFmpeg if you haven’t already. You can download it from ffmpeg.org.
Run the following FFmpeg command to convert the video to DASH format:
Terminal window
```
ffmpeg -i input.mp4 -map 0 -map 0 -c:v libx264 -b:v 1000k -s:v:0 640x360 -b:v:1 500k -s:v:1 320x180 -c:a aac -f dash output.mpd
```
This command will:
- Convert the video to two resolutions (you can modify these according to your needs).
- Create an output.mpd file, which is the DASH manifest file.
Adjust -b:v and -s:v values to suit the required bitrates and resolutions for your DASH streams.

2. Host the DASH Files

After creating the DASH files, host them on your web server. You’ll need:

The output.mpd manifest file.
Any segment files generated by FFmpeg (usually .m4s files).

Place these files in a directory accessible from your webpage, such as /videos/dash/.

3. Integrate DASH Player on Your Webpage

To play DASH content, you need a DASH-compatible player, such as dash.js, which is a popular JavaScript library for DASH playback.

Here’s how to embed DASH video on your webpage:

Include dash.js in your HTML file:

<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

Add a video element and link it to the DASH manifest:

<video id="videoPlayer" controls></video>

<script>
    var player = dashjs.MediaPlayer().create();
    player.initialize(document.querySelector("#videoPlayer"), "path/to/output.mpd", true);
</script>

Replace "path/to/output.mpd" with the actual path to your DASH manifest file, e.g., "/videos/dash/output.mpd".

Finalizing

Your DASH video should now be playable on your webpage with adaptive streaming, providing smooth playback across various network conditions. This setup allows for efficient streaming with support for different resolutions.

To create a full script that converts an MP4 video into 8 different resolutions for DASH streaming, you’ll need to use FFmpeg to generate multiple video qualities, then compile them into a single DASH manifest file. Here’s a comprehensive script that does this:

Script: `convert_to_dash.sh`

#!/bin/bash

# Define input and output
INPUT="input.mp4"        # Replace with your input video file
OUTPUT_DIR="output_dash" # Output directory for DASH files
MANIFEST_NAME="stream.mpd"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for DASH encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# FFmpeg command to generate multiple video streams for DASH
FFMPEG_CMD="ffmpeg -i $INPUT -c:a aac -b:a 128k"

for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution"
done

# Output as DASH
FFMPEG_CMD+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$MANIFEST_NAME"

# Run the command
echo "Executing: $FFMPEG_CMD"
eval "$FFMPEG_CMD"

echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

Explanation of Script Components

declare -a resolutions and bitrates: Arrays holding different resolutions and bitrates for the 8 video renditions.
FFMPEG_CMD: The core FFmpeg command.
- -i $INPUT specifies the input video file.
- -c:a aac -b:a 128k specifies the audio codec and bitrate.
- For each resolution and bitrate, -map 0:v -b:v:$i $bitrate -s:v:$i $resolution maps a video stream at each quality level, adding them to the command dynamically.
-use_timeline 1 -use_template 1 enables DASH template and timeline support.
-window_size 5 defines the number of segments available in the window for live streaming.

Running the Script

Save the script as convert_to_dash.sh.
Make it executable:
Terminal window
```
chmod +x convert_to_dash.sh
```
Run the script:
Terminal window
```
./convert_to_dash.sh
```

After running, the output_dash directory will contain:

stream.mpd: The DASH manifest.
Segment files for each resolution and bitrate.

Integrate with Webpage

Now that you have stream.mpd and segments, use the DASH player as shown in the previous response to embed this video on your webpage. Update the source in your HTML to point to stream.mpd.

To use the rx-player library to play DASH content on your webpage, you’ll need to integrate it similarly to how we did with dash.js, but tailored for rx-player. Here’s how to set it up:

Include rx-player in your webpage: You can either use the rx-player CDN link or install it via npm if you are building a more complex app.

Using CDN:
```
<script src="https://cdn.jsdelivr.net/npm/rx-player/dist/rx-player.min.js"></script>
```
Using npm (for advanced setups):
Terminal window
```
npm install rx-player
```

Add an HTML video element: This will serve as the player container.

<video id="videoPlayer" controls width="640" height="360"></video>

Initialize rx-player and Load the DASH Manifest: Create a JavaScript snippet to initialize the player and point it to the DASH manifest file you generated (stream.mpd).

<script>
    // Initialize the RX Player with the video element
    const player = new RxPlayer({
        videoElement: document.getElementById("videoPlayer")
    });

    // Path to the DASH manifest (replace with the actual path)
    const manifestUrl = "/path/to/stream.mpd";

    // Load the DASH content
    player.loadVideo({
        url: manifestUrl,
        transport: "dash",     // Specify DASH as the streaming protocol
        autoPlay: true         // Auto-play the video if desired
    });
</script>

Explanation

RxPlayer: Creates a new instance of the player, linked to the HTML <video> element with the ID "videoPlayer".
url: manifestUrl: Points to the DASH manifest URL, which should be the relative or absolute path to stream.mpd.
transport: "dash": Sets the streaming protocol to DASH, as rx-player supports multiple protocols.
autoPlay: true: Automatically plays the video when loaded (optional).

Final HTML Code Example

Here’s the full HTML code with rx-player integrated:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DASH Streaming with RX Player</title>
    <script src="https://cdn.jsdelivr.net/npm/rx-player/dist/rx-player.min.js"></script>
</head>
<body>

<video id="videoPlayer" controls width="640" height="360"></video>

<script>
    const player = new RxPlayer({
        videoElement: document.getElementById("videoPlayer")
    });

    const manifestUrl = "/path/to/output_dash/stream.mpd";  // Replace with actual path

    player.loadVideo({
        url: manifestUrl,
        transport: "dash",
        autoPlay: true
    });
</script>

</body>
</html>

Notes

Replace "/path/to/output_dash/stream.mpd" with the correct path where you’re hosting the DASH files.
rx-player offers additional customization options like playback quality and buffering settings if you need finer control over playback behavior.

When serving videos or any content from a local server (e.g., 192.168.1.4:8000), you might encounter issues accessing it from other devices on the network for several reasons. Here’s a checklist to troubleshoot and resolve these issues:

1. Check Firewall Settings

Local Firewall: Ensure your computer’s firewall isn’t blocking incoming connections on port 8000. You may need to configure the firewall to allow traffic on that port for the IP range of your network.
Router Firewall: Some routers also have built-in firewalls that can block traffic on certain ports, so verify that your router allows traffic on port 8000 within the local network.

2. Bind the Server to the Local IP Address

By default, many development servers bind only to localhost (127.0.0.1), which means they’re accessible only from the machine they’re running on.
To make it accessible on the entire network, start your server bound to your local IP address (e.g., 192.168.1.4) instead of localhost.

For example, if you’re using Python’s HTTP server, start it like this:

python3 -m http.server 8000 --bind 192.168.1.4

This binds the server to 192.168.1.4, allowing other devices on the same network to access it via 192.168.1.4:8000.

3. Use Absolute URLs for DASH Segments

DASH manifests often reference segment files with relative URLs. When serving the DASH files, ensure they’re accessible from the client’s perspective.
Double-check the output_dash folder structure and ensure that each referenced segment in stream.mpd uses paths that can be resolved from any device.
An alternative way to test this is to replace relative segment URLs in the stream.mpd file with absolute URLs (e.g., http://192.168.1.4:8000/output_dash/segment.m4s), though this is more of a workaround.

4. Ensure Devices Are on the Same Network

Verify that both the hosting computer and client devices are connected to the same local network (e.g., the same Wi-Fi network). Sometimes, a device might be on a guest network or another subnet, which could prevent access.

5. Use an HTTP Server with CORS Support

Cross-Origin Resource Sharing (CORS) can sometimes block media content from being loaded by other devices if not explicitly allowed.
To allow requests from other devices, you might need a simple web server with CORS support. Here’s an example using Python with CORS enabled:
Terminal window
```
python3 -m http.server 8000 --bind 192.168.1.4
```
Or, use a server like http-server with Node.js:
Terminal window
```
npx http-server -p 8000 --cors
```
This allows content to be accessed cross-origin, so DASH manifests and segment files can load properly.

6. Test with Another Device

Open a browser on another device and navigate to http://192.168.1.4:8000/output_dash/stream.mpd. This should verify if the server is reachable. If the video isn’t loading, it might be due to one of the issues above.

By following these steps, your local DASH server should become accessible to other devices on the network, enabling cross-device playback with rx-player or similar video libraries.

Yes, it makes sense that it works on another MacBook Air but not on an iPhone. Here are common reasons why iPhones might not be able to access or play the DASH stream properly:

1. Limited DASH Support on iOS

iOS (Safari) has limited support for the DASH streaming protocol. By default, Safari on iPhone doesn’t support DASH without additional libraries since Apple promotes its proprietary HLS (HTTP Live Streaming) protocol.
To play DASH on iOS, you need a player that can add DASH support in Safari, like rx-player or dash.js, which we’re already using here. However, these solutions don’t always work perfectly on mobile Safari.

Mobile Safari is particularly strict about CORS policies. If you haven’t enabled CORS on the local server, the iPhone might block access to the resources, including the DASH manifest or segments.
To fix this, start your server with CORS enabled. For example, with Python:
Terminal window
```
python3 -m http.server 8000 --bind 192.168.1.4
```
Or with Node.js http-server:
Terminal window
```
npx http-server -p 8000 --cors
```

3. HTTPS Requirement for Media Playback on iOS

iOS restricts certain media functionalities, especially video and audio streaming, if they’re served over HTTP instead of HTTPS.
Since your local server uses HTTP, this can sometimes prevent DASH content from loading on iPhones. You can use a self-signed certificate to enable HTTPS locally, but this can be complicated to set up for local testing.

4. Enable Autoplay with Controls

iOS is sensitive to autoplay and media controls for security reasons. Ensure that your <video> element has the controls attribute enabled, or initiate playback with a user action.

You might need to add muted to allow autoplay to work on iOS:

<video id="videoPlayer" controls muted width="640" height="360"></video>

5. Check Network Conditions

Ensure your iPhone is on the same network as your host machine and not on a cellular network. Some routers also have isolation features for mobile devices, restricting access to local IP addresses.

6. Debug with Safari’s Developer Tools

Connect your iPhone to a Mac and use Safari’s developer tools to debug. Open Safari on the Mac, go to Develop > iPhone > Webpage Name to view logs and identify specific loading or CORS issues.

If DASH proves too inconsistent on iOS due to compatibility, consider generating an HLS version of your video. HLS is natively supported on iOS and may offer a smoother experience across all devices:

ffmpeg -i input.mp4 -c:v libx264 -c:a aac -f hls -hls_time 10 -hls_list_size 0 output.m3u8

Then, use the output.m3u8 file as the source, which should work seamlessly on iPhones and iPads.

Using Firefox on iOS still relies on Safari’s underlying WebKit engine due to Apple’s restrictions, which means it shares the same limitations as Safari for video streaming protocols like DASH. Here’s how this impacts DASH streaming on iOS Firefox and possible workarounds:

Why Firefox on iOS Behaves Like Safari

On iOS, Apple mandates that all browsers use the WebKit engine. So, even if you’re using Firefox, it’s essentially Safari under the hood, and thus has similar limitations:

Limited DASH support (since iOS natively supports only HLS for adaptive streaming).
Security restrictions around HTTP vs. HTTPS.
Strict CORS policies.

Solutions and Workarounds

1. Serve DASH with HTTPS

iOS requires HTTPS for many media resources, especially with adaptive streaming. If possible, serve your DASH stream over HTTPS. Here’s how to set it up locally:
- Use a tool like ngrok to expose your local server over HTTPS temporarily, which avoids the hassle of setting up a self-signed certificate.
- Run ngrok on the specified port:
  Terminal window
```
ngrok http 8000
```
- Ngrok will provide an HTTPS URL that you can use to test DASH on your iOS device.

2. Switch to HLS for Better iOS Compatibility

Since iOS natively supports HLS (HTTP Live Streaming), consider converting your MP4 file to HLS as a secondary option for iOS users. Here’s how to do it with FFmpeg:
Terminal window
```
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename "output_dash/segment_%03d.ts" output_dash/stream.m3u8
```
This command generates an HLS playlist (stream.m3u8) and TS segment files (segment_001.ts, segment_002.ts, etc.).

Add logic to your HTML to serve HLS to iOS and DASH to other devices:

<script>
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const manifestUrl = isIOS ? "/path/to/stream.m3u8" : "/path/to/stream.mpd";
    const videoElement = document.getElementById("videoPlayer");

    if (isIOS) {
        videoElement.src = manifestUrl;
        videoElement.load();
    } else {
        const player = new RxPlayer({
            videoElement
        });
        player.loadVideo({
            url: manifestUrl,
            transport: "dash",
            autoPlay: true
        });
    }
</script>

3. Use CORS Headers

Enable CORS on your server to prevent access issues, especially for segment files. Using http-server with CORS or configuring CORS headers on your local server can help ensure compatibility:
Terminal window
```
npx http-server -p 8000 --cors
```

4. Autoplay and Controls

Since autoplay restrictions are strict on iOS, make sure you add controls and optionally muted to the <video> element to enhance compatibility:
```
<video id="videoPlayer" controls muted width="640" height="360"></video>
```

Testing and Debugging

Connect your iOS device to a Mac and use Safari’s Developer Tools (Develop > iPhone > Webpage Name) to debug and view any issues or errors with the DASH stream loading.

Summary

While DASH can be limited on iOS, using an HLS fallback with HTTPS can provide a seamless streaming experience across all devices, including Firefox on iOS.

To enable CORS (Cross-Origin Resource Sharing) in Python, especially if you’re using a simple HTTP server, you can either use a custom server script with CORS headers added or use a library like Flask for more control. Here are a few approaches to add CORS support depending on your setup.

1. Using `http.server` with Custom Headers (Python 3)

The built-in Python HTTP server (http.server) does not support CORS by default, but you can customize it to add the necessary headers.

Create a file, say cors_server.py, and use the following code:

from http.server import HTTPServer, SimpleHTTPRequestHandler

class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        # Add CORS headers
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
        self.send_header("Access-Control-Allow-Headers", "Content-Type")
        super().end_headers()

# Start the HTTP server with the custom CORS handler
if __name__ == "__main__":
    server_address = ('', 8000)  # Bind to all available IP addresses on port 8000
    httpd = HTTPServer(server_address, CORSRequestHandler)
    print("Serving on port 8000 with CORS enabled...")
    httpd.serve_forever()

Run this script:

python3 cors_server.py

This script:

Creates an HTTP server on port 8000 that includes the necessary CORS headers, allowing all origins (*).
Adds GET, POST, and OPTIONS methods for broader compatibility.

You can now access the server with CORS enabled from other devices or browsers.

2. Using `Flask` with CORS Support

For more complex applications, or if you’re already using Flask, you can easily add CORS support using the flask-cors package.

Install Flask and flask-cors:
Terminal window
```
pip install Flask flask-cors
```

Create a Flask server with CORS enabled:

from flask import Flask, send_from_directory
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # This enables CORS for all routes

@app.route('/<path:filename>')
def serve_file(filename):
    return send_from_directory('.', filename)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)

Run the Flask app:
Terminal window
```
python3 your_flask_server.py
```

This Flask app will serve files from the current directory with CORS enabled for all routes, making it a good fit for local DASH or HLS testing.

3. Using `http.server` with `http.server` Plugin

If you prefer a simpler approach, use the http.server package combined with the cors option of http-server for CORS support:

npx http-server -p 8000 --cors

This allows for quick CORS-enabled file serving without additional Python scripting.

modify this script to also generate HLS alongside DASH

#!/bin/bash

Define input and output

INPUT=“/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4” # Replace with your input video file OUTPUT_DIR=“/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/” # Output directory for DASH files MANIFEST_NAME=“stream.mpd”

Create output directory if it doesn’t exist

mkdir -p “$OUTPUT_DIR”

Define video resolutions and bitrates for DASH encoding

declare -a resolutions=(“1920x1080” “1280x720” “854x480” “640x360” “426x240” “384x216” “256x144” “128x72”) declare -a bitrates=(“5000k” “3000k” “1500k” “1000k” “700k” “500k” “300k” “150k”)

FFmpeg command to generate multiple video streams for DASH

FFMPEG_CMD=“ffmpeg -i $INPUT -c:a aac -b:a 128k”

for i in ”${!resolutions[@]}”; do resolution=”${resolutions[i]}” bitrate=”${bitrates[i]}” FFMPEG_CMD+=” -map 0:v -b:v:$i $bitrate -s:v:$i $resolution” done

Output as DASH

FFMPEG_CMD+=” -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets ‘id=0,streams=v id=1,streams=a’ -f dash $OUTPUT_DIR/$MANIFEST_NAME”

Run the command

echo “Executing: $FFMPEG_CMD” eval “$FFMPEG_CMD”

echo “DASH conversion complete. Files are located in $OUTPUT_DIR.”

To modify the script to generate both DASH and HLS outputs, we need to add an additional FFmpeg command to create the HLS playlist (.m3u8) and segment files. Below is the updated script:

#!/bin/bash

# Define input and output
INPUT="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4"        # Replace with your input video file
OUTPUT_DIR="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/" # Output directory for DASH and HLS files
DASH_MANIFEST_NAME="stream.mpd"
HLS_MANIFEST_NAME="stream.m3u8"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for DASH encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# FFmpeg command to generate multiple video streams for DASH
FFMPEG_CMD="ffmpeg -i $INPUT -c:a aac -b:a 128k"

for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution"
done

# Output as DASH
FFMPEG_CMD+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

# Run DASH command
echo "Executing DASH Conversion: $FFMPEG_CMD"
eval "$FFMPEG_CMD"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

# FFmpeg command to generate multiple video streams for HLS
FFMPEG_CMD_HLS="ffmpeg -i $INPUT -c:a aac -b:a 128k"

for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_HLS+=" -map 0:v -b:v:$i -s:v:$i $resolution"
done

# Output as HLS
FFMPEG_CMD_HLS+=" -f hls -hls_time 10 -hls_playlist_type vod -hls_segment_filename '$OUTPUT_DIR/segment_%03d.ts' $OUTPUT_DIR/$HLS_MANIFEST_NAME"

# Run HLS command
echo "Executing HLS Conversion: $FFMPEG_CMD_HLS"
eval "$FFMPEG_CMD_HLS"
echo "HLS conversion complete. Files are located in $OUTPUT_DIR."

Explanation of Additions

HLS Command (FFMPEG_CMD_HLS):
- A new FFmpeg command is created for the HLS output.
- This command includes similar mappings of resolutions and bitrates to match those of DASH but adds HLS-specific options:
  - -f hls specifies the HLS output format.
  - -hls_time 10 sets each HLS segment to 10 seconds.
  - -hls_playlist_type vod indicates that this is a video-on-demand (VOD) playlist, suitable for on-demand playback rather than live streaming.
  - -hls_segment_filename "$OUTPUT_DIR/segment_%03d.ts" specifies the filename format for HLS segments.
Separate Execution for DASH and HLS:
- The script first generates the DASH files and manifest, then runs the HLS command to generate HLS segments and the .m3u8 manifest.

After running the script, you’ll find:

A stream.mpd file and segments for DASH in the specified output directory.
A stream.m3u8 file and .ts segments for HLS in the same directory.

The error occurs because FFmpeg is trying to map streams with different resolutions and bitrates without specifying an output container format or filename for each output. To address this, specify individual output files for each resolution in both DASH and HLS commands.

Revised Script

Here’s how you can structure the script to avoid this error by specifying separate output files for each video stream in DASH and HLS:

#!/bin/bash

# Define input and output
INPUT="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4"        # Replace with your input video file
OUTPUT_DIR="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/" # Output directory for DASH and HLS files
DASH_MANIFEST_NAME="stream.mpd"
HLS_MANIFEST_NAME="stream.m3u8"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# FFmpeg command to generate multiple video streams for DASH
FFMPEG_CMD_DASH="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_DASH+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution -f mp4 -y $OUTPUT_DIR/dash_${resolution}.mp4"
done

# Generate the DASH manifest
FFMPEG_CMD_DASH+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

# Run DASH command
echo "Executing DASH Conversion: $FFMPEG_CMD_DASH"
eval "$FFMPEG_CMD_DASH"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

# FFmpeg command to generate multiple video streams for HLS
FFMPEG_CMD_HLS="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_HLS+=" -map 0:v -b:v:$i -s:v:$i $resolution"
done

# Output as HLS
FFMPEG_CMD_HLS+=" -f hls -hls_time 10 -hls_playlist_type vod -hls_segment_filename '$OUTPUT_DIR/segment_%03d.ts' $OUTPUT_DIR/$HLS_MANIFEST_NAME"

# Run HLS command
echo "Executing HLS Conversion: $FFMPEG_CMD_HLS"
eval "$FFMPEG_CMD_HLS"
echo "HLS conversion complete. Files are located in $OUTPUT_DIR."

Explanation of Changes

DASH Output Fix:
- For DASH, each resolution output is now written to a separate .mp4 file in the format dash_${resolution}.mp4.
- These separate MP4 files are then combined into a DASH manifest (stream.mpd).
HLS Output:
- The HLS command remains largely the same, using the generated resolutions and bitrates for HLS streaming segments (segment_001.ts, etc.).

This should avoid the output format error, as each output stream for DASH is saved as a standalone MP4 file with the correct format.

To resolve this, let’s break down the HLS command differently by specifying separate outputs for each resolution in HLS as well, then using FFmpeg’s variant playlist feature to link them into a single .m3u8 file.

Here’s the updated script to produce both DASH and HLS outputs, handling each output resolution and bitrate separately for HLS, too.

Updated Script

#!/bin/bash

# Define input and output
INPUT="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4"  # Replace with your input video file
OUTPUT_DIR="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/"                    # Output directory for DASH and HLS files
DASH_MANIFEST_NAME="stream.mpd"
HLS_MASTER_PLAYLIST_NAME="stream.m3u8"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# DASH: Generate multiple video streams and a DASH manifest
FFMPEG_CMD_DASH="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_DASH+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution -f mp4 -y $OUTPUT_DIR/dash_${resolution}.mp4"
done
FFMPEG_CMD_DASH+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

echo "Executing DASH Conversion: $FFMPEG_CMD_DASH"
eval "$FFMPEG_CMD_DASH"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

# HLS: Generate HLS streams and a master playlist for each resolution
HLS_PLAYLISTS=""
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    playlist_name="hls_${resolution}.m3u8"

    # Command to create HLS segments and playlist for each resolution
    ffmpeg -i $INPUT -c:v libx264 -b:v $bitrate -s $resolution -c:a aac -hls_time 10 -hls_playlist_type vod \
           -hls_segment_filename "$OUTPUT_DIR/hls_${resolution}_%03d.ts" -f hls "$OUTPUT_DIR/$playlist_name"

    # Add each variant to the HLS master playlist
    HLS_PLAYLISTS+=$'\n'"#EXT-X-STREAM-INF:BANDWIDTH=$((bitrate * 1000)),RESOLUTION=$resolution"
    HLS_PLAYLISTS+=$'\n'"$playlist_name"
done

# Create the HLS master playlist file
echo -e "#EXTM3U${HLS_PLAYLISTS}" > "$OUTPUT_DIR/$HLS_MASTER_PLAYLIST_NAME"
echo "HLS conversion complete. Files and master playlist are located in $OUTPUT_DIR."

Explanation of Changes

Separate Playlists for Each HLS Resolution:
- For each resolution, the script generates a unique HLS playlist (hls_${resolution}.m3u8) and its associated .ts segment files (hls_${resolution}_%03d.ts).
- This prevents the output format error by specifying unique output files for each HLS stream.
Creating an HLS Master Playlist:
- The HLS_PLAYLISTS variable gathers each playlist with EXT-X-STREAM-INF tags to create a master HLS playlist (stream.m3u8) that references each resolution.
- Each resolution is listed in the master playlist, allowing the player to adapt based on available bandwidth.
Master Playlist File:
- The master playlist file stream.m3u8 contains references to each resolution’s playlist. It is written to OUTPUT_DIR after all resolutions are processed.

After running this script, you will have:

DASH files and manifest (stream.mpd) for DASH playback.
HLS files and master playlist (stream.m3u8) for HLS playback, with segments in separate .ts files for each resolution.

The issue with only 1920x1080 chunks appearing might be due to how FFmpeg handles multiple outputs in the HLS command. To ensure that each resolution generates its own .ts files and HLS playlist, we need to make separate FFmpeg commands for each resolution.

Here’s an updated approach that ensures each resolution is processed individually, generating the necessary segments and playlists for all resolutions.

Updated Script for DASH and HLS

#!/bin/bash

# Define input and output
INPUT="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4"  # Replace with your input video file
OUTPUT_DIR="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/"                    # Output directory for DASH and HLS files
DASH_MANIFEST_NAME="stream.mpd"
HLS_MASTER_PLAYLIST_NAME="stream.m3u8"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# DASH: Generate multiple video streams and a DASH manifest
FFMPEG_CMD_DASH="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_DASH+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution -f mp4 -y $OUTPUT_DIR/dash_${resolution}.mp4"
done
FFMPEG_CMD_DASH+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

echo "Executing DASH Conversion: $FFMPEG_CMD_DASH"
eval "$FFMPEG_CMD_DASH"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

# HLS: Generate HLS streams and a master playlist for each resolution
HLS_PLAYLISTS=""
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    playlist_name="hls_${resolution}.m3u8"

    # Command to create HLS segments and playlist for each resolution
    ffmpeg -i $INPUT -c:v libx264 -b:v $bitrate -s $resolution -c:a aac -hls_time 10 -hls_playlist_type vod \
           -hls_segment_filename "$OUTPUT_DIR/hls_${resolution}_%03d.ts" -f hls "$OUTPUT_DIR/$playlist_name"

    # Add each variant to the HLS master playlist
    HLS_PLAYLISTS+=$'\n'"#EXT-X-STREAM-INF:BANDWIDTH=$((bitrate * 1000)),RESOLUTION=$resolution"
    HLS_PLAYLISTS+=$'\n'"$playlist_name"
done

# Create the HLS master playlist file
echo -e "#EXTM3U${HLS_PLAYLISTS}" > "$OUTPUT_DIR/$HLS_MASTER_PLAYLIST_NAME"
echo "HLS conversion complete. Files and master playlist are located in $OUTPUT_DIR."

Explanation of the Changes

Separate FFmpeg Commands for Each HLS Resolution:
- Each resolution is processed in a separate FFmpeg command, with -hls_segment_filename set to output segments for that specific resolution.
- The unique filenames like hls_${resolution}_%03d.ts ensure that each resolution has its own .ts segments.
Updating the HLS Master Playlist:
- The master playlist (stream.m3u8) is generated by appending each resolution’s playlist (hls_${resolution}.m3u8) along with its corresponding BANDWIDTH and RESOLUTION tags.
Check Output:
- After running the script, the HLS output directory should contain separate .m3u8 playlists and .ts segment files for each resolution alongside the master playlist (stream.m3u8), allowing adaptive streaming across all specified bitrates and resolutions.

The error value too great for base occurs because bash is misinterpreting the arithmetic operation in BANDWIDTH=$((bitrate * 1000)), where bitrate includes the k suffix (e.g., "5000k"). This suffix cannot be used directly in arithmetic operations.

To fix this, we need to strip the k from each bitrate before performing the arithmetic.

Updated Script

Here’s the modified version of the script to handle this:

#!/bin/bash

# Define input and output
INPUT="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4"  # Replace with your input video file
OUTPUT_DIR="/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/"                    # Output directory for DASH and HLS files
DASH_MANIFEST_NAME="stream.mpd"
HLS_MASTER_PLAYLIST_NAME="stream.m3u8"

# Create output directory if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Define video resolutions and bitrates for encoding
declare -a resolutions=("1920x1080" "1280x720" "854x480" "640x360" "426x240" "384x216" "256x144" "128x72")
declare -a bitrates=("5000k" "3000k" "1500k" "1000k" "700k" "500k" "300k" "150k")

# DASH: Generate multiple video streams and a DASH manifest
FFMPEG_CMD_DASH="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD_DASH+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution -f mp4 -y $OUTPUT_DIR/dash_${resolution}.mp4"
done
FFMPEG_CMD_DASH+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

echo "Executing DASH Conversion: $FFMPEG_CMD_DASH"
eval "$FFMPEG_CMD_DASH"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

# HLS: Generate HLS streams and a master playlist for each resolution
HLS_PLAYLISTS=""
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    playlist_name="hls_${resolution}.m3u8"

    # Remove the 'k' from bitrate for arithmetic and multiply by 1000
    bandwidth=$(( ${bitrate%k} * 1000 ))

    # Command to create HLS segments and playlist for each resolution
    ffmpeg -i $INPUT -c:v libx264 -b:v $bitrate -s $resolution -c:a aac -hls_time 10 -hls_playlist_type vod \
           -hls_segment_filename "$OUTPUT_DIR/hls_${resolution}_%03d.ts" -f hls "$OUTPUT_DIR/$playlist_name"

    # Add each variant to the HLS master playlist
    HLS_PLAYLISTS+=$'\n'"#EXT-X-STREAM-INF:BANDWIDTH=$bandwidth,RESOLUTION=$resolution"
    HLS_PLAYLISTS+=$'\n'"$playlist_name"
done

# Create the HLS master playlist file
echo -e "#EXTM3U${HLS_PLAYLISTS}" > "$OUTPUT_DIR/$HLS_MASTER_PLAYLIST_NAME"
echo "HLS conversion complete. Files and master playlist are located in $OUTPUT_DIR."

Explanation of Changes

Removing k from Bitrate:
- ${bitrate%k} strips the k suffix from each bitrate string, so 5000k becomes 5000.
- bandwidth=$(( ${bitrate%k} * 1000 )) calculates the bandwidth by multiplying this value by 1000.

With these changes, the script should correctly calculate bandwidth values and create the appropriate HLS and DASH files without errors.

In this script, the HLS master playlist (manifest) is saved as stream.m3u8 in the specified OUTPUT_DIR. This master playlist references each resolution-specific playlist generated for HLS streaming.

To clarify:

Resolution-specific HLS playlists: Each resolution generates its own .m3u8 playlist (e.g., hls_1920x1080.m3u8, hls_1280x720.m3u8, etc.), saved in the OUTPUT_DIR.
HLS master playlist: The master playlist, named stream.m3u8, is also saved in the OUTPUT_DIR. This master playlist contains links to each of the individual resolution playlists, allowing adaptive streaming.

After running the script, you can find:

The master playlist at: "$OUTPUT_DIR/stream.m3u8"
Resolution-specific playlists and .ts segment files in the same OUTPUT_DIR.

The master playlist file (stream.m3u8) is the main entry point for HLS players.

The HLS master playlist (stream.m3u8) is created and saved in the following line:

echo -e "#EXTM3U${HLS_PLAYLISTS}" > "$OUTPUT_DIR/$HLS_MASTER_PLAYLIST_NAME"

In this line:

"$OUTPUT_DIR/$HLS_MASTER_PLAYLIST_NAME" expands to "$OUTPUT_DIR/stream.m3u8", saving the master playlist in the specified OUTPUT_DIR.
echo -e "#EXTM3U${HLS_PLAYLISTS}" writes the #EXTM3U header followed by the list of resolution-specific playlists stored in HLS_PLAYLISTS.

This line consolidates the individual resolution playlists into a single master playlist file, stream.m3u8.

You’re right to double-check this! The isIOS check can sometimes be finicky because user agent detection is not always reliable and can vary across browsers and updates. For iOS detection, it’s usually better to refine the check to capture all iOS device identifiers accurately.

Here’s an improved version of isIOS detection, which is more robust across iOS devices and browsers:

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
             (navigator.userAgent.includes("Mac") && "ontouchend" in document);

Explanation

/iPad|iPhone|iPod/.test(navigator.userAgent): This part checks for specific device names in the user agent, which works well on iOS.
navigator.userAgent.includes("Mac") && "ontouchend" in document: This additional condition handles cases where newer iPads, especially in desktop mode, report as Mac but also have touch capabilities. Checking for "ontouchend" in document helps capture these cases.

Example Usage in Code

Here’s how you would integrate this isIOS check within a larger setup for switching between HLS and DASH on iOS:

<script>
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
                 (navigator.userAgent.includes("Mac") && "ontouchend" in document);
    const manifestUrl = isIOS ? "/path/to/stream.m3u8" : "/path/to/stream.mpd";
    const videoElement = document.getElementById("videoPlayer");

    if (isIOS) {
        videoElement.src = manifestUrl;
        videoElement.load();
    } else {
        const player = new RxPlayer({
            videoElement
        });
        player.loadVideo({
            url: manifestUrl,
            transport: "dash",
            autoPlay: true
        });
    }
</script>

This updated isIOS detection should more reliably identify iOS devices, including those in desktop mode, ensuring that they use the HLS stream (stream.m3u8) as needed.

If playback on a remote iOS device isn’t working despite these changes, here are several common reasons why HLS might fail on iOS in a remote environment and steps to troubleshoot them:

1. HTTPS Requirement on iOS for Media Playback

Issue: iOS enforces strict HTTPS requirements for media content in Safari and many apps. If you’re serving content over HTTP, iOS might block it.
Solution: Use a tool like ngrok to create a temporary HTTPS tunnel to your local server. Install and run ngrok as follows:
Terminal window
```
ngrok http 8000
```
This command will provide an HTTPS URL (e.g., https://abcd1234.ngrok.io) that you can use to test the HLS stream on your iOS device.

Issue: iOS requires valid CORS headers for media resources. If the server doesn’t include appropriate CORS headers, iOS Safari will block the HLS resources.

Solution: If using a simple Python server, modify it to support CORS:

from http.server import HTTPServer, SimpleHTTPRequestHandler

class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
        self.send_header("Access-Control-Allow-Headers", "Content-Type")
        super().end_headers()

if __name__ == "__main__":
    httpd = HTTPServer(('0.0.0.0', 8000), CORSRequestHandler)
    print("Serving on port 8000 with CORS enabled...")
    httpd.serve_forever()

This will allow other devices to access the HLS content and is helpful for local network testing.

3. Compatibility with HLS Segment and Playlist Files

Issue: iOS can be sensitive to HLS playlist structure and segment sizes.
Solution: Ensure the HLS segments are compatible. You can update the hls_time in the FFmpeg command to a smaller segment size, like 6 seconds:
Terminal window
```
-hls_time 6
```

Additionally, ensure each HLS resolution playlist is saved correctly and referenced in the master playlist (stream.m3u8), and confirm that iOS can access each individual .ts file.

4. Testing with Direct Links on iOS

Check Direct Access: On the iOS device, open Safari and go directly to the HLS master playlist (stream.m3u8). For example:
```
https://abcd1234.ngrok.io/path/to/stream.m3u8
```
If the video still doesn’t play, this direct approach can reveal errors in playlist structure or permissions issues specific to HLS on iOS.

5. Debugging with Safari Developer Tools

Connect your iOS device to a Mac, then in Safari on the Mac, go to Develop > [Your iPhone] > [Your Website].
This tool allows you to view network requests and console logs directly from the iOS device, which can often highlight CORS or HTTPS-related issues preventing HLS playback.

By addressing HTTPS, CORS, segment compatibility, and testing with direct access, you should be able to identify the exact issue affecting playback on iOS devices.

If the direct link to the HLS master playlist (stream.m3u8) plays on iOS, this confirms that the HLS content and server setup (CORS, HTTPS, segment compatibility) are correctly configured. The issue is likely with how the player is loading the HLS stream in the script.

Here are steps to ensure the HLS playback is triggered properly for iOS devices in your code:

1. Simplify the iOS Playback Code

Instead of using rx-player for HLS playback on iOS, you can let the <video> element handle it natively, as iOS has built-in support for HLS. This approach reduces potential conflicts and ensures that iOS can play HLS content directly.

Here’s a refined version of the script:

<script>
    // Check if the device is iOS
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
                 (navigator.userAgent.includes("Mac") && "ontouchend" in document);

    // Define the manifest URLs
    const hlsManifestUrl = "https://your-ngrok-link.ngrok.io/path/to/stream.m3u8";  // Replace with your HTTPS HLS URL
    const dashManifestUrl = "https://your-ngrok-link.ngrok.io/path/to/stream.mpd";  // Replace with your DASH URL

    // Get the video element
    const videoElement = document.getElementById("videoPlayer");

    if (isIOS) {
        // For iOS, use the native player for HLS
        videoElement.src = hlsManifestUrl;
        videoElement.controls = true;  // Ensures controls are shown
        videoElement.play();           // Attempt to auto-play if allowed
    } else {
        // For non-iOS, use rx-player for DASH
        const player = new RxPlayer({
            videoElement
        });
        player.loadVideo({
            url: dashManifestUrl,
            transport: "dash",
            autoPlay: true
        });
    }
</script>

Explanation

Directly Setting the HLS URL: For iOS devices, the script sets the <video> element’s src attribute to the HLS URL (hlsManifestUrl) directly. This lets iOS use its native player for HLS, which is more reliable.
Controls and Autoplay: videoElement.controls = true ensures the video controls are visible on iOS. videoElement.play() tries to autoplay, though it might require user interaction depending on iOS settings.
Fallback for Other Devices: Non-iOS devices use rx-player with DASH as before.

Testing

After implementing this:

Load the page on your iOS device and observe if the video starts playing as expected.
If you still experience issues, try manually pressing play on the video element, as iOS sometimes restricts autoplay, especially over HTTP or in iframes.

This approach leverages iOS’s native HLS support without relying on third-party players, which is generally the most compatible solution for streaming HLS on Apple devices.

If the direct HLS link works on iOS but not when embedded in the <video> element on your webpage, and you’re using ngrok to provide HTTPS, it’s likely an issue with how iOS handles CORS, HTTPS, or autoplay requirements. Let’s go through additional steps to troubleshoot and fix this:

1. Check for CORS Headers on HLS Segments

Ensure that every .m3u8 playlist and each .ts segment file is accessible with proper CORS headers when served over ngrok.
You can verify this by inspecting the network requests in Safari’s Developer Tools on the iOS device (see below for steps).

2. Explicitly Add `type="application/vnd.apple.mpegurl"` to the `<video>` Tag

iOS often needs this MIME type explicitly specified to recognize HLS streams.

<video id="videoPlayer" controls width="640" height="360" type="application/vnd.apple.mpegurl"></video>

3. Confirm HTTPS on All Resources

Sometimes iOS blocks mixed content (HTTPS page with HTTP resources). Double-check that both stream.m3u8 and all .ts segments are loading via HTTPS.

4. Use `videoElement.src` and `.load()` in a User-Triggered Event

iOS sometimes restricts autoplay with programmatically set sources. Try setting the HLS stream in response to a user event, such as a button click.

<button onclick="playVideo()">Play Video</button>
<video id="videoPlayer" controls width="640" height="360" type="application/vnd.apple.mpegurl"></video>

<script>
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
                 (navigator.userAgent.includes("Mac") && "ontouchend" in document);
    const hlsManifestUrl = "https://your-ngrok-link.ngrok.io/path/to/stream.m3u8";  // Replace with your HTTPS HLS URL
    const dashManifestUrl = "https://your-ngrok-link.ngrok.io/path/to/stream.mpd";  // Replace with your DASH URL

    function playVideo() {
        const videoElement = document.getElementById("videoPlayer");
        if (isIOS) {
            videoElement.src = hlsManifestUrl;
            videoElement.load();
            videoElement.play();
        } else {
            const player = new RxPlayer({ videoElement });
            player.loadVideo({ url: dashManifestUrl, transport: "dash", autoPlay: true });
        }
    }
</script>

5. Use Safari’s Developer Tools on a Mac for Debugging

Connect your iPhone to a Mac, open Safari on the Mac, go to Develop > [Your iPhone] > [Your Webpage].
This will let you see the network requests from your iPhone and any errors in loading the HLS files. Specifically:
- Look for CORS errors or blocked HTTP resources.
- Check if .m3u8 or .ts files are failing to load.

6. Disable Autoplay Restrictions for Testing

Temporarily disable any autoplay restrictions in the iPhone’s settings to see if the video loads.
On iOS, go to Settings > Safari > Advanced > Experimental Features and toggle off “Autoplay Restrictions.”

Summary

These steps should help narrow down the exact cause:

Explicitly setting type="application/vnd.apple.mpegurl"
Using HTTPS for every resource
Setting up the video source in a user-click event for reliability on iOS

Testing with Safari’s Developer Tools on a Mac will also give insight into any loading or playback errors specific to HLS on iOS.

what is window_size and hls_time?

#!/bin/bash

Define input and output

INPUT=“/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video/ULC_REEL_2023_1080p.mp4” # Replace with your input video file OUTPUT_DIR=“/Users/georgeadamon/Documents/Github/ULC/automation/src/python/local/assets/video” # Output directory for DASH and HLS files DASH_MANIFEST_NAME=“stream.mpd” HLS_MANIFEST_NAME=“stream.m3u8”

Create output directory if it doesn’t exist

mkdir -p “$OUTPUT_DIR”

Define video resolutions and bitrates for DASH encoding

declare -a resolutions=(“1920x1080” “1280x720” “854x480” “640x360” “426x240”) declare -a bitrates=(“5000k” “3000k” “1500k” “1000k” “700k”)

FFmpeg command to generate multiple video streams for DASH

FFMPEG_CMD=“ffmpeg -i $INPUT -c:a aac -b:a 128k”

for i in ”${!resolutions[@]}”; do resolution=”${resolutions[i]}” bitrate=”${bitrates[i]}” FFMPEG_CMD+=” -map 0:v -b:v:$i $bitrate -s:v:$i $resolution” done

Output as DASH

FFMPEG_CMD+=” -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets ‘id=0,streams=v id=1,streams=a’ -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME”

Run DASH command

echo “Executing DASH Conversion: $FFMPEG_CMD” eval “$FFMPEG_CMD” echo “DASH conversion complete. Files are located in $OUTPUT_DIR.”

HLS: Generate HLS streams and a master playlist for each resolution

HLS_PLAYLISTS="" for i in ”${!resolutions[@]}”; do resolution=”${resolutions[i]}” bitrate=”${bitrates[i]}” playlist_name=“hls_${resolution}.m3u8”

# Remove the 'k' from bitrate for arithmetic and multiply by 1000
bandwidth=$(( ${bitrate%k} * 1000 ))

# Command to create HLS segments and playlist for each resolution
ffmpeg -i $INPUT -c:v libx264 -b:v $bitrate -s $resolution -c:a aac -hls_time 10 -hls_playlist_type vod \
       -hls_segment_filename "$OUTPUT_DIR/hls_${resolution}_%03d.ts" -f hls "$OUTPUT_DIR/$playlist_name"

# Add each variant to the HLS master playlist
HLS_PLAYLISTS+=$'\n'"#EXT-X-STREAM-INF:BANDWIDTH=$bandwidth,RESOLUTION=$resolution"
HLS_PLAYLISTS+=$'\n'"$playlist_name"

done

Create the HLS master playlist file

echo -e “#EXTM3U${HLS_PLAYLISTS}” > “$OUTPUT_DIR/$HLS_MANIFEST_NAME” echo “HLS conversion complete. Files and master playlist are located in $OUTPUT_DIR.”

In this script, window_size and hls_time are parameters that control how DASH and HLS segment video files for adaptive streaming.

1. `window_size` (DASH)

Definition: window_size specifies the number of segments to keep in the DASH manifest’s “live” window for low-latency or live streaming.
Effect: For on-demand content, this parameter doesn’t affect playback significantly. However, for live streaming, it defines the number of segments in the manifest’s “active” or “sliding” window that clients can buffer.
Usage: In your script, window_size=5 means only the latest 5 segments are retained in the manifest for playback. This setting is typically for live streaming; for VOD (on-demand) content, window_size can be omitted.

2. `hls_time` (HLS)

Definition: hls_time specifies the length (in seconds) of each segment in an HLS playlist.
Effect: Shorter hls_time values (e.g., 6 seconds) produce more segments and allow clients to adapt more quickly to changes in network conditions, but they may increase overhead slightly. Longer hls_time values produce fewer segments, which may reduce switching frequency but could result in slower adaptation.
Usage: In your script, hls_time=10 creates 10-second segments for each HLS variant. This is generally a good balance between playback stability and network adaptability, but you can adjust this value to fit your streaming needs.

Recommended Adjustments Based on Use Cases

For VOD Content:
- You can leave window_size as is or remove it if you don’t need it.
- Adjust hls_time based on how you want your segments to behave; 6–10 seconds is a standard range for on-demand streaming.
For Low-Latency or Live Streaming:
- Lower window_size (like 2 or 3) to keep fewer segments in the active playback window.
- Decrease hls_time (e.g., to 4-6 seconds) for quicker adaptation and reduced latency.

In general, window_size is mostly relevant for DASH in live settings, while hls_time is essential for both VOD and live HLS settings to control segment duration and playback adaptability.

To create DASH videos with 3-second chunks, you can use the -seg_duration parameter in FFmpeg, which specifies the segment duration for DASH. Here’s how to modify your FFmpeg command to achieve this:

Updated DASH Command with 3-Second Segments

In your script, modify the DASH command to include -seg_duration 3. This instructs FFmpeg to create 3-second segments.

Here’s the updated part of your script:

# Output as DASH with 3-second segments
FFMPEG_CMD+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -seg_duration 3 -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

Explanation of `-seg_duration`

-seg_duration 3: This parameter sets each segment duration to 3 seconds, which results in more segments. A shorter segment duration allows the player to adapt more quickly to network conditions, which can be helpful for both VOD and live streaming.

Full DASH Command Example

Here’s what your full DASH command might look like with the 3-second segment duration:

FFMPEG_CMD="ffmpeg -i $INPUT -c:a aac -b:a 128k"
for i in "${!resolutions[@]}"; do
    resolution="${resolutions[i]}"
    bitrate="${bitrates[i]}"
    FFMPEG_CMD+=" -map 0:v -b:v:$i $bitrate -s:v:$i $resolution"
done

# Set 3-second segments for DASH
FFMPEG_CMD+=" -use_timeline 1 -use_template 1 -window_size 5 -adaptation_sets 'id=0,streams=v id=1,streams=a' -seg_duration 3 -f dash $OUTPUT_DIR/$DASH_MANIFEST_NAME"

# Run DASH command
echo "Executing DASH Conversion: $FFMPEG_CMD"
eval "$FFMPEG_CMD"
echo "DASH conversion complete. Files are located in $OUTPUT_DIR."

This setup will create DASH segments with a 3-second duration, resulting in a more responsive playback experience.

To ensure the DASH video loops, you’ll need to set the MPD (manifest) to indicate a looping playback. DASH doesn’t inherently support looping like HTML5 <video> tags do, so we often set looping behavior on the client side or add attributes to the DASH manifest.

Here’s how to set up looping for DASH:

1. Modify the `<video>` Element on the Web Page

If you’re embedding the video in a webpage, you can add the loop attribute to the <video> tag. This is the simplest and most effective way to ensure looping playback:

<video id="videoPlayer" controls loop></video>

2. Set Looping in `RxPlayer` (if Applicable)

If you’re using RxPlayer or a similar library, you can set looping programmatically:

const player = new RxPlayer({
    videoElement: document.getElementById("videoPlayer")
});

player.loadVideo({
    url: "/path/to/your/stream.mpd",
    transport: "dash",
    autoPlay: true,
    loop: true  // Loop option for RxPlayer
});

3. Modify the DASH Manifest with `MPD` Attribute (Advanced)

To attempt looping on a DASH level, you can add the MPD@mediaPresentationDuration attribute to the DASH manifest using FFmpeg’s -mpd_output option. However, this only makes sense if your player is configured to recognize this attribute, as looping is not natively supported in DASH manifests.

4. Final DASH Command with Looping

Add these components to your DASH video:

The loop attribute in the HTML <video> element is typically the most straightforward approach.
The above script setup in RxPlayer ensures a looped playback if you use RxPlayer for DASH.

If embedding in a webpage, the HTML5 loop attribute or player-specific configurations like the example for RxPlayer are usually the best way to ensure a continuous playback experience with DASH content.