动态插入视频地址

最新推荐文章于 2025-06-02 20:24:20 发布

原创最新推荐文章于 2025-06-02 20:24:20 发布 · 10w+ 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#视频处理

前端开发积累专栏收录该内容

23 篇文章

订阅专栏

本文介绍了使用原生JavaScript和jQuery实现视频元素加载及播放控制的方法。通过点击按钮，可以为视频元素动态设置源地址并触发加载，进而实现视频的自动播放。文章详细展示了两种不同方式的代码实现，适用于网页开发中视频内容的展示与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键核心语句：

document.getElementById(‘video’).load();

一、用原生的书写

 //html
 <img id="playvideo" src="assets/images/play.png" alt="">
 <div class="video-warp" style="display: none;">
      <p class="cancel-video">
          <img src="assets/images/play.png" alt="">
      </p>
      <video id="video" controls="controls" preload="auto" width="800">
           <source type="video/mp4" src="" id='v1'>
      </video>
   </div>

// js
window.onload=function(){
     document.getElementById('playvideo').onclick = function(){
             document.getElementById('v1').src='video/1.mp4';
             document.getElementById('video').load();
     }
}

二、jquery书写

// 功能是实现点击之后插入视频地址，并且播放这个视频（应用于项目--云平台官网）
$(document).on('click','#playvideo',function(e){//点击播放视频
       $('body').css("overflow", "hidden");
       var videolink = $(this).attr('data-link');
       $('#video source').attr('src',videolink);
       document.getElementById('video').load();
       $('.video-warp').show();
       $('#video').get(0).play();
       if (play_status) {
            $('#video').get(0).play();
            play_status=false;
       }else{
            $('#video').get(0).pause();
            play_status=true;
       }
});