How to embed flash video format (flv, swf) files in html files

How to embed flash video format (flv, swf) files in html files
Flash file formats: .FLV and .SWF

There are two extensions available for the flash video format: .flv and .swf. What are the differences between them?

(1) A .flv file (flash video) is a picture-based video stream and audio. If you are running a streaming service, flv would be a good choice. The upstream condition is that any part of this file can be accessed by the client terminal and will not wait for download at any time. Then again, running a streaming service is expensive.

(2) .swf is also the Macromedia Flash file format, which is a complete video-audio file with scripts and more. This facilitates HTTP (progressive) downloads, also known as "psuedo streaming". When a portion of the file is downloaded, the video segment will play immediately, but the client will wait for the flash file segment to be downloaded before it can access it (cannot fast forward) unless the entire file is downloaded. This is something we talk about a lot, it's a simple, inexpensive, easy way to stream your video media. SWF is not an official abbreviation, and some people have claimed that it is an abbreviation for "ShockWave Flash" or "Small Web Format".

To embed Flash in a page, you can use the following methods:

Copy code
The code is as follows:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="320" height="400" >
<param name="movie" value="video-filename.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>

What we need to pay attention to here is: <param name="movie" value="video-filename.swf"> and <embed src="video-filename.swf"..... These two places are the location names of swf files. For other parameters, please refer to the introduction in the above link.

However, after writing this, although the swf format files in the page can be displayed, the flv format files cannot be played. After struggling for a while, I summarized a solution from Dreamweaver:

Copy code
The code is as follows:

<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','The content of this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="314" height="234" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="314" height="234" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

There is an additional version control method MM_CheckFlashVersion().

The lower part is written in a similar way to swf, but there are slight differences. <param name="movie" value="FLVPlayer_Progressive.swf" This is no longer a playback file, but a file equivalent to a player. After inserting a flash file using Dreamweaver, you will find the file FLVPlayer_Progressive.swf and Clear_Skin_3.swf. The former is equivalent to the player, and the latter is equivalent to the skin. Dreamweaver provides a variety of skins, which can be used as desired. In the above code, the player file FLVPlayer_Progressive.swf is used in two places. This is very similar to swf, but it is not the source file. In the code, skinName is used to set the skin, and other properties are relatively easy to understand.

To sum up, there are 3 key points in embedding the flv format: 1. The player FLVPlayer_Progressive.swf, this file is indispensable, and this file must be in the same file directory as the flv source file (the reason has not been found yet) 2. Skin skinName=Clear_Skin_3, the skin can be replaced, which is also indispensable and must be together with the flv source file. 3. Source file, streamName, this parameter displays the file name of the source file without the suffix. When the file name is in Chinese, Dreamweaver will know to convert that name into a long string. . . . When the html file and flv file are not in the same file directory, you need to include the file path (pay special attention to this in the project).



The figure shows that two skins are used for the same page, one is set to automatic play and the other is set to manual play. The file format is flv.

<<:  HTML+CSS makes div tag add delete icon in the upper right corner sample code

>>:  What we can learn from Google's new UI (pictures and text)

Recommend

Common scenarios and avoidance methods for index failure in MySQL

Preface I have read many similar articles before,...

What to do if you forget the root password of Mysql5.7 (simple and effective method)

In the previous article, we introduced how to for...

CSS3 achieves conic-gradient effect

grammar: background-image: conic-gradient(from an...

Detailed explanation of Vue + Axios request interface method and parameter passing method

Table of contents 1. Get request: 2. Post request...

Detailed explanation of Angular parent-child component communication

Table of contents Overview 1. Overview of input a...

Storage engine and log description based on MySQL (comprehensive explanation)

1.1 Introduction to storage engines 1.1.1 File sy...

Detailed explanation of the case of Vue child component calling parent component method

1. Call the parent component method directly thro...

Introduction to adding new users to MySql, creating databases for users, and assigning permissions to users

1. Add a new user Only allow local IP access crea...

Vue custom instructions to achieve pop-up window drag four-side stretching and diagonal stretching effect

introduction The company's recent Vue front-e...

Summary of basic usage of CSS3 @media

//grammar: @media mediatype and | not | only (med...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Detailed explanation of the installation process of Jenkins on CentOS 7

Install Jenkins via Yum 1. Installation # yum sou...

Native JS to implement breathing carousel

Today I will share with you a breathing carousel ...

MySQL table addition, deletion, modification and query basic tutorial

1. Create insert into [table name] (field1, field...

Solution to win10 without Hyper-V

Are you still looking for a way to enable Hyper-v...