javascript - ie8でビデオを一時停止する方法

Question

ie8 でビデオを一時停止するにはどうすればよいですか。ここに 2 つの div があります。クリックされたボタンに基づいて、水平タブの概念と同じように、ビデオで div の 1 つを表示しています。私の要件は、再生中の場合はビデオを一時停止することです。ボタンをクリックして別のdivに切り替え、切り替えたdivにあるビデオを表示する必要があります。

<script type="text/javascript">
    function showTrainingPopUp(page) {
        var offset;
        document.getElementById('PopUpDialog').style.display = "block";
        document.getElementById('dimmerDiv').style.display = "block";
        //offset = document.getElementById("divExternal").offsetWidth;
        offset = (document.width !== undefined) ? document.width : document.body.offsetWidth;
        document.getElementById('dimmerDiv').style.width = offset + "px";
        //offset = document.getElementById("divExternal").offsetHeight;
        offset = (document.height !== undefined) ? document.height : document.body.offsetHeight;
        document.getElementById('dimmerDiv').style.height = offset + "px";
        document.getElementById('dimmerDiv').style.top = "0px";
        document.getElementById('dimmerDiv').style.left = "0px";
        if (page == 'phone') {
            document.getElementById('phoneTrainingDiv').style.display = "block";
            document.getElementById('portalTrainingDiv').style.display = "none";
            document.getElementById('phoneTrnBtn').value = "Phone Training Video >>";
            document.getElementById('portalTrnBtn').value = "Portal Training Video";
            document.getElementById("portalTrainingFrame").pause();  //will not work on IE8
        }
        if (page == 'portal') {
            document.getElementById('portalTrainingDiv').style.display = "block";
            document.getElementById('phoneTrainingDiv').style.display = "none";
            document.getElementById('portalTrnBtn').value = "Portal Training Video >>";
            document.getElementById('phoneTrnBtn').value = "Phone Training Video";
            document.getElementById("phoneTrainingFrame").pause();
        }
    }
    function hideTrainingPopUp() {
        document.getElementById('PopUpDialog').style.display = 'none';
        document.getElementById('dimmerDiv').style.display = 'none';
    }
    function setTrainingURL(dropdown){
         var url = dropdown.options[dropdown.selectedIndex].value; 
         document.getElementById("phoneTrainingFrame").src = url;

    }
</script>
</h:head>

<div id='dimmerDiv' class="divDimmer"></div>
<div id='PopUpDialog' class="popUpDialog">

    <table cellpadding="10" cellspacing="10" width="100%">
        <tr>
            <td class="textTopAlign">
                <div style="padding: 1px;"><input type="button" id="portalTrnBtn" value="Portal Training Video" onclick="showTrainingPopUp('portal')" /></div> 
                <div style="padding: 1px;"><input type="button" id="phoneTrnBtn" value="Phone Training Video" onclick="showTrainingPopUp('phone')" ></div>
            </td>
            <td>
                <div class="borderGrayPadding15">
                    <div id="portalTrainingDiv" style="display: none;">
                        <!-- <iframe width="470" height="280" src="#{welcomeDataBean.portalTrainingURL}"> </iframe> -->
                        <embed id="portalTrainingFrame" width="470" height="280" src="#{welcomeDataBean.portalTrainingURL}" type="application/x-shockwave-flash"></embed>
                    </div>
                    <div id="phoneTrainingDiv" style="display: none;">
                        <div class="txtHeading5">What type of phone do you have? &#160;&#160;&#160;&#160;
                        <h:selectOneMenu id="phoneTypeID" onchange="setTrainingURL(this);">
                            <f:selectItem itemLabel="- Select -" itemValue=""/>
                            <f:selectItems value="#{welcomeDataBean.phoneTypeURLList}"/>
                        </h:selectOneMenu> </div><br />
                        <!-- <iframe id="phoneTrainingFrame" width="470" height="280"> </iframe> -->
                        <embed id="phoneTrainingFrame" width="470" height="280" type="application/x-shockwave-flash"></embed>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td>
                <div id="closeBtnDiv">
                    <input type="button" value="Close" onclick="hideTrainingPopUp()" class="hvdsPrimaryButton" /> <br /><br />
                </div>
            </td>
        </tr>
    </table>
</div>