Javascript HTML5自定义视频控件

我想要替换按钮在单击时播放视频。当我点击按钮时，什么也没发生。。这是没有正常的控制，我只是用一个标准的按钮测试这个功能，但我没有得到任何回应

var func = function(){
var video = document.getElementById('video');
var but = document.getElementById('play-pause');
but.addEventListener("click",function(){
    if (video.paused == true) {
        video.play();
    }else{
        video.pause();
    }
});
}
func();

html

您的浏览器不支持HTML5视频

单击此处开始

试试这段代码 Javascript

<script>
function playPause()
{       
    var myVideo=document.getElementById("template_35_vd_up"); 
            if (myVideo.paused) 
              {
                    myVideo.play();

              }
            else
            { 
              myVideo.pause();

            } 
} 
</script>

函数playPause（）
{       
var myVideo=document.getElementById（“模板”\u 35\u vd\u up”）；
如果（myVideo.paused）
{
myVideo.play（）；
}
其他的
{ 
myVideo.pause（）；
} 
} 

Html

播放/暫停

试试这个：- HTML:-

<video id="video" width="500" oncontextmenu="return false;">
    <source src="https://f9f9fce4f78470f7e248-0b04ae6868f3b76f0186ae4641e4c043.ssl.cf2.rackcdn.com/VidsToCloud.com-Upload-07-01-2013-104654117---What-is-HTML5--www.savevid.com-.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<div id="Layer"></div>
<input type="range" id="seek-bar" value="0">
<div class="clear"></div>
<img src="http://cdn1.iconfinder.com/data/icons/minimal/22x22/status/audio-volume-high.png">
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

jQuery(function ($) {
    //For adding play pause layer on top on the player
    $("#Layer").css({
        position: "absolute",
        top: $("#video").offset().top,
        left: $("#video").offset().left,
        width: $("#video").outerWidth(),
        height: $("#video").outerHeight()
    });

    //Switching play/pause image on the player
    $("#Layer").on("click", function (e) {

        var myVideo = $("#video")[0];
        if (myVideo.paused) {
            myVideo.play();
            $(this).addClass("pause");
        } else {
            myVideo.pause();
            $(this).removeClass("pause");
        }
    });

    //Toggle behaviour for play/pause 
    $("#video").on("click", function (e) {
        var myVideo = $(this)[0];
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }
    });

    //Showing/Hiding layer on top of the player
    $("#video").on("mouseenter", function (e) {
        $("#Layer").toggle();
    });

    //Volume bar to control video volume
    $("#volume-bar").on("change", function () {
        var myVideo = $("#video")[0];
        myVideo.volume = $(this).val();
    });

    //Seek bar to sync with the current playing video
    $("#video").on("timeupdate", function () {
        var myVideo = $(this)[0];
        var value = (100 / myVideo.duration) * myVideo.currentTime;
        $("#seek-bar").val(value);
    });

    //Seek bar drag to move the current playing video at the time.
    $("#seek-bar").on("mouseup", function () {
        var myVideo = $("#video")[0];

        var currentTime = $("#seek-bar").val() / (100 / myVideo.duration);
        myVideo.currentTime = currentTime;
    });

    $("#seek-bar").on("mousedown", function () {
        var myVideo = $("#video")[0];
        myVideo.pause();
    });

});

---

我刚做了一把js小提琴，它对我来说很好-wierd-不使用我的chrome:/尝试编辑，但只有一个字符。属性“control”应该是“controls”。你知道我原来的帖子有什么问题吗？我不明白为什么我的代码不起作用，但在小提琴中却很好：@Joe尝试将代码包装在

文档中。准备好了

或

窗口。加载

函数是有效的-当我只使用纯js时，它位于文档顶部，但当我将它移到代码下方或与html内联时，它也很好（函数（）{成功了-谢谢你的帮助

<video id="video" width="500" oncontextmenu="return false;">
    <source src="https://f9f9fce4f78470f7e248-0b04ae6868f3b76f0186ae4641e4c043.ssl.cf2.rackcdn.com/VidsToCloud.com-Upload-07-01-2013-104654117---What-is-HTML5--www.savevid.com-.mp4" type="video/mp4">Your browser does not support the video tag.</video>
<div id="Layer"></div>
<input type="range" id="seek-bar" value="0">
<div class="clear"></div>
<img src="http://cdn1.iconfinder.com/data/icons/minimal/22x22/status/audio-volume-high.png">
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

jQuery(function ($) {
    //For adding play pause layer on top on the player
    $("#Layer").css({
        position: "absolute",
        top: $("#video").offset().top,
        left: $("#video").offset().left,
        width: $("#video").outerWidth(),
        height: $("#video").outerHeight()
    });

    //Switching play/pause image on the player
    $("#Layer").on("click", function (e) {

        var myVideo = $("#video")[0];
        if (myVideo.paused) {
            myVideo.play();
            $(this).addClass("pause");
        } else {
            myVideo.pause();
            $(this).removeClass("pause");
        }
    });

    //Toggle behaviour for play/pause 
    $("#video").on("click", function (e) {
        var myVideo = $(this)[0];
        if (myVideo.paused) {
            myVideo.play();
        } else {
            myVideo.pause();
        }
    });

    //Showing/Hiding layer on top of the player
    $("#video").on("mouseenter", function (e) {
        $("#Layer").toggle();
    });

    //Volume bar to control video volume
    $("#volume-bar").on("change", function () {
        var myVideo = $("#video")[0];
        myVideo.volume = $(this).val();
    });

    //Seek bar to sync with the current playing video
    $("#video").on("timeupdate", function () {
        var myVideo = $(this)[0];
        var value = (100 / myVideo.duration) * myVideo.currentTime;
        $("#seek-bar").val(value);
    });

    //Seek bar drag to move the current playing video at the time.
    $("#seek-bar").on("mouseup", function () {
        var myVideo = $("#video")[0];

        var currentTime = $("#seek-bar").val() / (100 / myVideo.duration);
        myVideo.currentTime = currentTime;
    });

    $("#seek-bar").on("mousedown", function () {
        var myVideo = $("#video")[0];
        myVideo.pause();
    });

});