当视频标签具有自动播放属性时，方法.play（）和.pause（）似乎不起作用

I have a video, that has autoplay loop attributes. It starts playing as soon as page is loaded.

我有一个视频，有自动播放循环属性。它会在加载页面后立即开始播放。

<video id="myVideo" autoplay muted loop>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
 </video>
<div>
      <a id="bVideo" href="#">Pause video</a>       
</div>

I want it to be paused or to be played any time. And text change on button respectively. I am not sure, whether the code correct is (as I am newbie), but I am pretty sure it has to work :)

我想让它暂停或随时播放。并且文本分别在按钮上更改。我不确定，代码是否正确（因为我是新手），但我很确定它必须工作:)

$(document).ready(function(){
    var vid = document.getElementById("#myVideo");
    var vidB = $("#bVideo");
    var textContent = vidB.text();

    $(vidB).click(function(){
        switch (textContent){
            case "pause video":
                $(vid).get(0).pause();
                // $(vid).trigger('pause');
                $(vidB).text("play video");
                break;
            case "play video":
                $(vid).get(0).play();
                // $(vid).trigger('play');
                $(vidB).text("pause video");
                break;
            default:
                break;
        }
    });
 });

I have tried different constructions, non of them worked.

我尝试了不同的结构，但没有结构。

Here is jsfiddle link Example

这是jsfiddle链接示例

Any help and critique will be appreciated, thanks!

任何帮助和批评将不胜感激，谢谢！

1 个解决方案

#1

You don't change the value of the variable textContent and the initial value doesn't match the case Pause video vs pause video.
vidB is already a jQuery object so no need to wrap it in $()
vid === $(vid).get(0)
Takes an id as the parameter not a selector(notice no #)

您不会更改变量textContent的值，并且初始值与暂停视频与暂停视频的情况不匹配。 vidB已经是一个jQuery对象所以不需要将它包装在$（）vid中=== $（vid）.get（0）将id作为参数而不是选择器（注意没有＃）

$(document).ready(function(){
    var vid = document.getElementById("myVideo");
    var vidB = $("#bVideo");

    vidB.click(function(){
        switch (vidB.text()){
            case "Pause video":
                vid.pause();
                vidB.text("play video");
                break;
            case "play video":
                vid.play();
                vidB.text("Pause video");
                break;
            default:
                break;
        }
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" autoplay muted loop>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
 </video>
<div>
      <a id="bVideo" href="#">Pause video</a>       
</div>