html js video player code example

Example 1: javascript video player

<script type="text/javascript">
FWDEVPUtils.onReady(function(){
 
    FWDEVPlayer.videoStartBehaviour = "pause";
     
    new FWDEVPlayer({       
        //main settings
        instanceName:"player1",
        parentId:"topVideo",
        mainFolderPath:"content",
        initializeOnlyWhenVisible:"no",
        skinPath:"minimal_skin_white",
        displayType:"responsive",
        fillEntireVideoScreen:"no",
        playsinline:"yes",
        autoScale:"yes",
        openDownloadLinkOnMobile:"no",
        useVectorIcons:"no",
        useResumeOnPlay:"no",
        goFullScreenOnButtonPlay:"no",
        useHEXColorsForSkin:"no",
        normalHEXButtonsColor:"#FF0000",
        selectedHEXButtonsColor:"#FFFFFF",
        privateVideoPassword:"428c841430ea18a70f7b06525d4b748a",
        startAtTime:"",
        stopAtTime:"",
        startAtVideoSource:2,
        videoSource:[
            {source:"content/videos/robin_sd.mp4", label:"small version"},
            {source:"content/videos/robin_hd.mp4", label:"hd720"},
            {source:"content/videos/robin_full_hd.mp4", label:"hd1080"}
        ],
        posterPath:"content/posters/robin-poster.png",
        showErrorInfo:"yes",
        fillEntireScreenWithPoster:"yes",
        disableDoubleClickFullscreen:"no",
        addKeyboardSupport:"yes",
        useChromeless:"no",
        showPreloader:"yes",
        preloaderColors:["#999999", "#FFFFFF"],
        autoPlay:"no",
        enableAutoplayOnMobile:"no",
        loop:"no",
        scrubAtTimeAtFirstPlay:"00:00:00",
        maxWidth:980,
        maxHeight:552,
        volume:.8,
        //logo settings
        showLogo:"yes",
        hideLogoWithController:"yes",
        logoPosition:"topRight",
        logoLink:"https://code.tutsplus.com/",
        logoMargins:5,
        //controller settings
        showController:"yes",
        showDefaultControllerForVimeo:"no",
        showScrubberWhenControllerIsHidden:"yes",
        showControllerWhenVideoIsStopped:"yes",
        showVolumeScrubber:"yes",
        showVolumeButton:"yes",
        showTime:"yes",
        showRewindButton:"yes",
        showQualityButton:"yes",
        showSubtitleButton:"yes",
        showShareButton:"yes",
        showDownloadButton:"yes",
        showMainScrubberToolTipLabel:"yes",
        showChromecastButton:"no",
        showFullScreenButton:"yes",
        repeatBackground:"yes",
        controllerHeight:41,
        controllerHideDelay:3,
        startSpaceBetweenButtons:7,
        spaceBetweenButtons:9,
        mainScrubberOffestTop:14,
        scrubbersOffsetWidth:4,
        timeOffsetLeftWidth:5,
        timeOffsetRightWidth:3,
        volumeScrubberWidth:80,
        volumeScrubberOffsetRightWidth:0,
        timeColor:"#777777",
        youtubeQualityButtonNormalColor:"#777777",
        youtubeQualityButtonSelectedColor:"#FFFFFF",
        scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
        scrubbersToolTipLabelFontColor:"#5a5a5a",
        //redirect at video end
        redirectURL:"",
        redirectTarget:"_blank",
        //playback rate / speed
        showPlaybackRateButton:"yes",
        defaultPlaybackRate:"1", //0.25, 0.5, 1, 1.25, 1.5, 2
        //embed window
        embedWindowCloseButtonMargins:0,
        borderColor:"#333333",
        mainLabelsColor:"#FFFFFF",
        secondaryLabelsColor:"#a1a1a1",
        shareAndEmbedTextColor:"#5a5a5a",
        inputBackgroundColor:"#000000",
        inputColor:"#FFFFFF",
        //thumbnails preview
        thumbnailsPreview:"",
        thumbnailsPreviewWidth:196,
        thumbnailsPreviewHeight:110,
        thumbnailsPreviewBackgroundColor:"#000000",
        thumbnailsPreviewBorderColor:"#666",
        thumbnailsPreviewLabelBackgroundColor:"#666",
        thumbnailsPreviewLabelFontColor:"#FFF",
        // context menu
        showContextmenu:'yes',
        showScriptDeveloper:"yes",
        contextMenuBackgroundColor:"#1f1f1f",
        contextMenuBorderColor:"#1f1f1f",
        contextMenuSpacerColor:"#333",
        contextMenuItemNormalColor:"#888888",
        contextMenuItemSelectedColor:"#FFFFFF",
        contextMenuItemDisabledColor:"#444"
    });             
});
</script>

Example 2: javascript video player

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Easy Video Player - TutsPlus Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="content/global.css">
    <script type="text/javascript" src="java/FWDEVPlayer.js"></script>      
  </head>
  <body>
   
    <!-- WE WILL ADD OUR VIDEO PLAYER HERE -->
   
  </body>
</html>