How to play a video file?_html css file how to play-CSDN博客

How to play a video file?

Using VideoIO you can publish using real-time streaming (only rtmp or rtmfp URLs) but play using streaming (rtmp orrtmfp) as well as web download mode (http or https). Please see How to record and play a video message? for details on the streaming play mode. This tutorial will walk you through details on the web downloaded play mode.

If you want to play a video file that is already available on some web server, you can just set the src property with the URL of the FLV file. For example, there are some free FLV files here.

If you want to play your video files, e.g., the ones you recorded using VideoIO, you will need to serve your files from a web server. There are many free and commercial web servers in the market, e.g., Apache httpd. Information about how to set up a web server is beyond the scope of this tutorial.

Python comes with a built-in web server named SimpleHTTPServer that can server any file from your current directory or sub-directory. Suppose you have your video files in the current directory, you can start a web server as follows, then open a browser and point it to http://localhost:8080 to see the list of files in the directory where you ran this command.

$ python -m SimpleHTTPServer 8080

Suppose you have a video file named file1.flv which you can now reach using http://localhost:8080/file1.flv from a browser. For playing this file using VideoIO, just set this URL to the src property.

To programmatically set the property, use JavaScript as shown below. The example is similar to the one in How to record and play a video message? where you can set the src property of the VideoIO object named video1.

<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashVars" value="controls=true" />
</object>
<script>
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>
<input id="src1" type="text"/>
<input value="set" type="button" 
    οnclick="getFlashMovie('video1').setProperty('src', 
        document.getElementById('src1').value)"/>
<input value="reset" type="button" 
    οnclick="getFlashMovie('video1').setProperty('src', null)"/>

This type of message playback with http or https URL is called web downloaded play mode. The control panel allows you to pause or play the media, or seek to a new position of the total duration is available using the play head bar. You can create your own JavaScript and HTML based user interface to control these properties of VideoIO.