User Guide Cancel

Adding videos in Dreamweaver

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to embed videos in web pages and insert FLV files in Dreamweaver.

Embed videos in web pages (HTML5)

HTML5 supports video and audio tags that allow users to play video and audio files in a browser, without an external plug-in or player. Dreamweaver supports code hints for adding video and audio tags.

Live View renders the video, providing a preview of the video that you are embedding in the web page.

Note:

Although you can embed any video in your web page, Live View does not always render all videos. The audio and video tags are supported in Dreamweaver using the Apple QuickTime plug-in. In Windows, if the Apple QuickTime plug-in is not installed, the web page does not render the media content.

To know how to insert HTML5 video, see Insert HTML5 videos in Dreamweaver.

Inserting FLV files

Insert FLV files

You can easily add FLV video to your web pages without using the Flash authoring tool. You must have an encoded FLV file before you begin.

Dreamweaver inserts a SWF component that displays the FLV file; when viewed in a browser, this component displays the selected FLV file, as well as a set of playback controls.

The selected FLV file and a set of playback controls

Dreamweaver gives you the following options for delivering FLV video to your site visitors:

Progressive Download Video

Downloads the FLV file to the site visitor’s hard disk and then plays it. Unlike traditional "download and play" methods of video delivery, however, progressive download allows the video file to start playing before the download is complete.

Streaming Video

Streams the video content and plays it on a web page after a short buffer period that ensures smooth play back. To enable streaming video on your web pages, you must have access to Adobe® Flash® Media Server.

You must have an encoded FLV file before you can use it in Dreamweaver. You can insert video files created with two kinds of codecs (compression/decompression technologies): Sorenson Squeeze and On2.

As with regular SWF files, when you insert an FLV file, Dreamweaver inserts code that detects whether the user has the correct version of Flash Player to view the video. If the user does not have the correct version, the page displays alternative content that prompts the user to download the latest version of Flash Player.

Note:

To view FLV files, users must have Flash Player 8 or later installed on their computers. If a user does not have the required version of Flash Player installed, but does have Flash Player 6.0 r65 or later installed, the browser displays a Flash Player express installer instead of the alternative content. If the user declines the express install, the page then displays the alternative content.

For more information about working with video, visit the Video Technology Center at www.adobe.com/go/flv_devcenter.

Insert an FLV file

  1. Select Insert > HTML > Flash Video.

    Inserting Flash video
    Inserting Flash video

  2. In the Insert FLV dialog box, select Progressive Download or Streaming Video from the Video Type pop-up menu.
  3. Complete the rest of the dialog box options and click OK.
Note:

Microsoft Internet Information Server (IIS) does not process nested object tags. For ASP pages, Dreamweaver uses nested object/embed code instead of nested object code when inserting SWF or FLV files.

Set options for progressive download video

The Insert FLV dialog box lets you set options for progressive download delivery of an FLV file inserted in a web page.

  1. Select Insert > HTML > Flash Video (or click the Flash Video icon in the HTML category of the Insert panel).

  2. In the Insert FLV dialog box, select Progressive Download Video from the Video Type menu.
    Inserting Flash video
    Inserting Flash video

  3. Specify the following options:

    URL

    Specifies a relative or absolute path to the FLV file. To specify a relative path (for example, mypath/myvideo.flv), click the Browse button, navigate to the FLV file, and select it. To specify an absolute path, type the URL (for example, http://www.example.com/myvideo.flv) of the FLV file.

    Skin

    Specifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-up menu.

    Width

    The width of the FLV file, in pixels. Dreamweaver determines the width of the FLV file and you can see the width automatically appearing in this field.

    Height

    The height of the FLV file, in pixels. Dreamweaver automatically optimizes the height of the FLV file and you can see the height automatically appear in this field.

    Note:

    Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.

    Constrain

    Maintains the same aspect ratio between the width and height of the video component. This option is selected by default.

    Auto Play

    Specifies whether to play the video when the web page is opened.

    Auto Rewind

    Specifies whether the playback control returns to starting position after the video finishes playing.

  4. Click OK to close the dialog box and add the FLV file to your web page.

    The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video content on a web page. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file to which you’re adding video content. When you upload the HTML page containing the FLV file, Dreamweaver uploads these files as dependent files (as long as you click Yes in the Put Dependent Files dialog box).

Set options for streaming video

The Insert FLV dialog box lets you set options for streaming video download of an FLV file inserted in a web page.

  1. Select Insert > HTML > Flash Video (or click the Flash Video icon in the HTML category of the Insert panel).

  2. Select Streaming Video from the Video Type pop-up menu.
    Setting options for streaming video
    Setting options for streaming video

    Server URI

    Specifies the server name, application name, and instance name in the form rtmp://www.example.com/app_name/instance_name.

    Stream Name

    Specifies the name of the FLV file that you want to play (for example, myvideo.flv). The .flv extension is optional.

    Skin

    Specifies the appearance of the video component. A preview of the selected skin appears beneath the Skin pop-up menu.

    Width

    The width of the FLV file, in pixels. Dreamweaver determines the width of the FLV file, and autopopulates the width in this field.

    Height

    The height of the FLV file, in pixels. Dreamweaver determines the height of the FLV file, and autopopulates the height in pixels, in this field.

    Note:

    Total With Skin is the width and height of the FLV file plus the width and height of the selected skin.

    Constrain

    Maintains the same aspect ratio between the width and height of the video component. This option is selected by default.

    Live Video Feed

    Specifies whether the video content is live. If Live Video Feed is selected, Flash Player plays a live video feed streamed from Flash® Media Server. The name of the live video feed is the name specified in the Stream Name text box.

    Note:

    To enable Live Video Feed, you must select the one of the Halo skin options from the Skin field. When you select Live Video Feed, only the volume control appears on the component’s skin, because you cannot manipulate live video. Additionally, the Auto Play and Auto Rewind options have no effect.

    Auto Play

    Specifies whether to play the video when the web page is opened.

    Auto Rewind

    Specifies whether the playback control returns to starting position after the video finishes playing.

    Buffer Time

    Specifies the time, in seconds, required for buffering before the video starts playing. The default buffer time is set to 0 so that the video starts playing instantly after the Play button is clicked. (If Auto Play is selected, the video starts playing as soon as a connection is made with the server.) You might want to set a buffer time if you are delivering video that has a higher bit rate than the site visitor’s connection speed, or when Internet traffic might cause bandwidth or connectivity problems. For example, if you want to send 15 seconds of video to the web page before the web page starts to play the video, set the buffer time to 15.

  3. Click OK to close the dialog box and add the FLV file to your web page.

    The Insert FLV command generates a video player SWF file and a skin SWF file that are used to display your video on a web page. The command also generates a main.asc file that you must upload to your Flash Media Server. (To see the new files, you may need to click the Refresh button in the Files panel.) These files are stored in the same directory as the HTML file to which you’re adding video content. When you upload the HTML page containing the FLV file, don’t forget to upload the SWF files to your web server, and the main.asc file to your Flash Media Server.

    Note:

    If you already have a main.asc file on your server, check with your server administrator before uploading the main.asc file generated by the Insert FLV command.

    You can easily upload all of the required media files by selecting the video component placeholder in the Dreamweaver Document window, and clicking the Upload Media button in the Property inspector (Window > Properties). To see a list of required files, click Show required files.

    Note:

    The Upload Media button does not upload the HTML file that contains the video content.

Edit Flash Player download information

When you insert an FLV file in a page, Dreamweaver inserts code that detects whether the user has the correct version of Flash Player. If not, the page displays default alternative content that prompts the user to download the latest version. You can change this alternative content at any time.

This procedure also applies to SWF files.

Note:

If a user does not have the required version but does have Flash Player 6.0 r65 or later, the browser displays a Flash Player express installer. If the user declines the express install, the page then displays the alternative content.

  1. In the Design view of the Document window, select the SWF file or FLV file.

  2. Click the eye icon in the SWF file or FLV file.

    Note:

    You can also press Control + ] to switch to alternative content view. To return to SWF/FLV view, press Control + [ until all of the alternative content is selected. Then press Control + [ again.

  3. Edit the content just as you would edit any other content in Dreamweaver.
    Note:

    You cannot add SWF files or FLV files as alternative content.

  4. Click the eye icon again to return to the SWF or FLV file view.

Troubleshoot FLV files

This section details some of the most common causes of problems with FLV files.

Viewing problems caused by absence of related files

The code generated by Dreamweaver CS4 and later relies on four dependent files, different from the FLV file itself:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • The skin file (for example Clear_Skin_1.swf)

Note that there are two more dependent files for Dreamweaver CS4 and later, compared to Dreamweaver CS3.

The first two of these files (swfobject_modified.js and expressInstall.swf) are installed in a folder called Scripts, which Dreamweaver creates in the root of your site if it doesn't already exist.

The second two files (FLVPlayer_Progressive.swf and the skin file) are installed in the same folder as the page in which the FLV is embedded. The skin file contains the controls for the FLV, and its name depends on the skin chosen in the options described in Dreamweaver Help. For example, if you choose Clear Skin, the file is named Clear_Skin_1.swf.

All four dependent files MUST be uploaded to your remote server for the FLV to display correctly.

Forgetting to upload these files is the most common cause of FLV files failing to run correctly in a web page. If one of the files is missing, you might see a "white box" on the page.

To ensure that you've uploaded all of the dependent files, use the Dreamweaver Files panel to upload the page in which the FLV appears. When you upload the page, Dreamweaver asks you if you want to upload dependent files (unless you've turned off this option). Click yes to upload dependent files.

Viewing problems when previewing pages locally

Because of security updates in Dreamweaver CS4, you cannot use the Preview in Browser command to test a page with an embedded FLV unless you define a local testing server in your Dreamweaver site definition and use the testing server to preview the page.

Normally, you require a testing server only if you are developing pages with ASP, ColdFusion, or PHP (see Set up your computer for application development). If you are building websites that use only HTML, and haven't defined a testing server, pressing F12 (Windows) Opt+F12 (Macintosh) produces a jumble of skin controls onscreen. The workaround is either to define the testing server and use the testing server to preview your page, or upload your files to a remote server and view them there.

Note:

It’s possible that security settings may also be responsible for an inability to preview local FLV content, but Adobe has not been able to confirm this. You can try changing your security settings to see if it helps. For more information on changing your security settings, see Tech Note 117502.

Other possible causes for problems with FLV files

  • If you are having trouble previewing locally, make sure the Preview using temporary file option is deselected under Edit > Preferences > Real-time Preview.

  • Make sure you have the latest FlashPlayer plug-in

  • Be wary of moving files and folders around outside of Dreamweaver. When you move files and folders outside of Dreamweaver, Dreamweaver cannot guarantee the correct paths to FLV-related files.

  • You can temporarily replace the FLV file that’s giving you trouble with a known working FLV file. If the replacement FLV file works, then the problem is with the original FLV file, and not with your browser or computer.

Edit or delete an FLV component

Change the settings for the video on your web page, by selecting the video component placeholder in the Dreamweaver Document window and using the Property inspector. Another way is to delete the video component and reinsert it by selecting Insert > HTML > Flash Video.

Edit the FLV component

  1. Select the video component placeholder in the Dreamweaver Document window by clicking the FLV icon at the center of the placeholder.
  2. Open the Property inspector (Window > Properties) and make your changes.
    Note:

    You cannot change video types (from progressive download to streaming, for example) by using the Property inspector. To change the video type, delete the FLV component, and reinsert it by selecting Insert > Media > FLV.

Delete the FLV component

  1. Select the FLV component placeholder in the Dreamweaver Document window and press Delete.

Add video (other formats)

To know how to add videos that are not .flv files, see Add Video (non-FLV). 

You may also want to know how to insert plug-in content in Dreamweaver to play .mp3 files or Quicktime videos in your Dreamweaver site.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy